Merge pull request #14 from kode-team/1.4.0

upgrade version 1.4.0

Author: redgoose-dev

README.md

@@ -8,7 +8,7 @@
 
 데모를 통하여 이미지 url, 이미지 첨부파일을 리사이즈하는 모습을 볼 수 확인할 수 있다.
 
-https://kode-team.github.io/image-resize/
+> https://kode-team.github.io/image-resize/
 
 
 ## Installation
@@ -18,180 +18,90 @@ https://kode-team.github.io/image-resize/
 ```
 npm install image-resize
 yarn add image-resize
+bun add -d image-resize
 ```
 
 
 ## Usage
 
-먼저 `ImageResize` 객체를 만들어서 `play()`메서드를 실행하는 방식이다.
+`import`로 함수를 불러서 비동기 방식으로 사용하면 된다.
 
 ### Module environment
 
 ```javascript
-import ImageResize from 'image-resize';
+import imageResize from 'image-resize'
 
-var imageResize = new ImageResize({
+let res = await imageResize('image.jpg', {
   format: 'png',
-  width: 640
-});
-imageResize.play('image.jpg');
+  width: 640,
+})
 ```
 
 ### Vanilla environment
 
 ```html
-<script src="./ImageResize.umd.js"></script>
+<script src="imageResize.umd.js"></script>
 
 <script>
-  var imageResize = new ImageResize({
-    format: 'png',
-    width: 640
-  });
-  imageResize.play('image.jpg');
+let res = await imageResize('image.jpg', {
+  format: 'png',
+  width: 640,
+})
 </script>
 ```
 
 
-## Options
-
-`image-resize`에서 다음과 같은 옵션을 사용하여 컨트롤할 수 있다.
-
-### Basic
-
-|    Name    |  Type  |  Default  | Description                                             |
-|:----------:|:------:|:---------:|:--------------------------------------------------------|
-|  quality   | number |   `.75`   | jpg 이미지일때의 이미지 퀄리티값                                     |
-|   format   | string |   `jpg`   | 출력할 포맷. `png,jpg,webp`                                  |
-| outputType | string | `base64`  | 출력방식. `base64,canvas,blob`                              |
-|   width    | number |   `320`   | 조절할 가로사이즈                                               |
-|   height   | number |  `null`   | 조절할 세로 사이즈. 한쪽값이 있는쪽으로 기준이 되어 조절한다.                     |
-|  reSample  | number |    `2`    | 리새플링 횟수. 수치가 높을수록 경계선이 부드러워지지만 처리속도는 느려진다. 최대 4까지 적용된다. |
-|  bgColor   | string | `#ffffff` | 캔버스 배경색                                                 |
-|  sharpen   | number |  `0.75`   | 선명하게 강도                                                 |
-
-
-## Methods
-
-만들어진 인스턴스 객체에서 액션을 실행하는 메서드가 제공된다. 메서드를 사용하기 위하여 다음과 같이 인스턴스 객체를 만들었다.
-
-```javascript
-var imageResize = new ImageResize();
-```
-
-좀더 자세하게 사용하는 방법에 대해서는 데모 소스를 참고.  
-https://github.com/kode-team/image-resize/blob/main/src/demo/index.js
+## Source
 
+사용하기 먼저 어떤 형식의 이미지 데이터를 지원하는지 확인해볼 필요가 있다.
+지원하는 이미지 데이터의 형식은 다음과 같다.
 
-### play
-
-실질적으로 리사이즈를 실행한다.
-
-- Param `String,HTMLInputElement,File,Blob`
-- Return `string,object,HTMLCanvasElement`
-
-```javascript
-// image url
-try {
-  let res = await imageResize.play('image.jpg')
-  console.log(res);
-} catch (e) {
-  console.error(e);
-}
-
-// <input type="file" id="upload"/>
-let res = await imageResize.play(document.getElementById('upload'));
-
-// File
-let res = await imageResize.play(element.files[0]);
-
-// Blob
-let res = await imageResize.play(new Blob(src, { type: 'image/jpeg' }));
-```
-
-### updateOptions
-
-정의되어있는 객체의 옵션을 변경한다.
-
-- Param `Object`
-- Return `ImageResize`
-
-```javascript
-imageResize.updateOptions({
-  width: 800,
-  format: 'jpg',
-  quality: .5
-});
-```
+- `String`: 이미지 url
+- `File`: File 형식의 객체
+- `Blob`: Blob 타입의 객체
+- `HTMLCanvasElement`: canvas 엘리먼트
 
-다음과 같이 다른 메서드와 같이 묶어서 사용할 수 있다.
 
-```javascript
-imageResize
-  .updateOptions({ width: 400 })
-  .play('image.jpg')
-  .then();
-
-let res = await imageResize
-  .updateOptions({ width: 400 })
-  .play('image.jpg');
-```
-
-### get
-
-이미지나 파일첨부폼을 이용해서 캔버스로 가져온다.
-
-- Param `string,HTMLInputElement,File,Blob`
-- Return `HTMLCanvasElement`
-
-```javascript
-// image url
-imageResize.get('image.jpg').then();
-
-// <input type="file" id="upload"/>
-let res = await imageResize.get(document.getElementById('upload'));
-```
+## Options
 
-### resize
+다음과 같은 옵션을 사용할 수 있다.
 
-리사이즈 실행하는 역할을 한다.
+|    Name    |  Type  |    Default    | Description                                             |
+|:----------:|:------:|:-------------:|:--------------------------------------------------------|
+|   width    | number |     `320`     | 조절할 가로사이즈                                               |
+|   height   | number |  `undefined`  | 조절할 세로 사이즈. 한쪽값이 있는쪽으로 기준이 되어 조절한다.                     |
+|   format   | string |     `jpg`     | 출력할 포맷. `png,jpg,webp`                                  |
+| outputType | string |   `base64`    | 출력방식. `base64,canvas,blob`                              |
+|  quality   | number |     `.75`     | jpg 이미지일때의 이미지 퀄리티값                                     |
+|  reSample  | number |      `2`      | 리샘플링 횟수. 수치가 높을수록 경계선이 부드러워지지만 처리속도는 느려진다. 최대 4까지 적용된다. |
+|  sharpen   | number |    `0.75`     | 선명함의 강도                                                 |
+|  bgColor   | string | `transparent` | 캔버스 배경색 (배경이 투명한 이미지를 사용하면 영향을 받을 수 있다.)                |
 
-- Param `HTMLCanvasElement`
-- Return `HTMLCanvasElement`
+### 사이즈 값 조정
 
-```javascript
-imageResize.resize(document.getElementById('canvas')).then();
-```
+width, height 사이즈 값은 다음과 같은 조건을 따른다.
 
-### output
+- width, height 둘다 있을때: width 값이 기준이 된다.
+- width 값이 없을때: height 값이 기준이 된다.
+- height 값이 없을때: width 값이 기준이 된다.
+- width, height 둘다 없을때: width 값이 기준이 된다.
 
-결과물을 출력하는 역할을 한다.
+만약 height 값을 기준으로 사용하고 싶다면 `width`값을 `0`이나 `undefined`으로 넣어줘야한다.
 
-- Param `HTMLCanvasElement`
-- Return `string,object,HTMLCanvasElement`
+### 배경색
 
-```javascript
-imageResize.output(document.getElementById('canvas')).then();
-```
+기본값으로 `transparent`로 설정되어있다.
+투명한 배경 이미지에 배경색을 넣고싶다면 `#ffffff`같은 값으로 넣어주면 배경색이 들어가게 된다.
 
 
-## Mix methods
+## Output
 
-메서드들이 `Promise`로 리턴되기 때문에 다음과 같이 연결해서 사용할 수 있다.  
-체인 형식이다보니 중간에 다른 함수를 끼워넣어서 사용할 수 있다.
+함수를 실행하고 반환해주는 데이터의 형식이다.
+옵션에서 `outputType` 값에 맞는 형식으로 데이터가 리턴된다.
 
-```javascript
-try {
-  const imageResize = new ImageResize();
-  let res = await imageResize.updateOptions({ width: 640 }).get('image.jpg');
-  res = await imageResize.resize(res);
-  res = imageResize.sharpen(res);
-  res = await ready(res);
-  res = await imageResize.output(res);
-  console.log(res);
-} catch (e) {
-  console.error(error);
-}
-```
+- `base64`: base64 형식의 문자
+- `blob`: Blob 타입의 객체
+- `canvas`: canvas 엘리먼트
 
 
 ## Development
@@ -201,24 +111,11 @@ try {
 
 ```
 // development
-yarn run dev
+npm run dev
 
 // production
-yarn run build
+npm run build
 
 // preview
-yarn run start
+npm run preview
 ```
-
-
-## Support
-
-### browser
-
-- Google chrome
-- Safari (문제가 생길 수 있습니다.)
-
-### node.js
-
-이 모듈은 브라우저에서 이미지를 리사이즈 하기위하여 만들어졌다.  
-node.js 환경에서는 [sharp](https://github.com/lovell/sharp) 같은 모듈들을 사용을 권장드립니다.