image-resize

개인적으로 마음에 드는 이미지 리사이즈 도구를 못찾아서 이렇게 만들게 되었다.
이 도구는 웹 브라우저에서 사용하는 <canvas/>엘리먼트를 사용하여 이미지 리사이즈 한다.

Demo

데모를 통하여 이미지 url, 이미지 첨부파일을 리사이즈하는 모습을 볼 수 확인할 수 있다.

https://kode-team.github.io/image-resize/

Installation

CLI에서 설치할 프로젝트에서 다음과 같은 명령을 실행한다.

npm install image-resize
yarn add image-resize
bun add -d image-resize

Usage

import로 함수를 불러서 비동기 방식으로 사용하면 된다.

Module environment

import imageResize from 'image-resize'

let res = await imageResize('image.jpg', {
  format: 'png',
  width: 640,
})

Vanilla environment

<script src="imageResize.umd.js"></script>

<script>
let res = await imageResize('image.jpg', {
  format: 'png',
  width: 640,
})
</script>

Source

사용하기 먼저 어떤 형식의 이미지 데이터를 지원하는지 확인해볼 필요가 있다. 지원하는 이미지 데이터의 형식은 다음과 같다.

• String: 이미지 url
• File: File 형식의 객체
• Blob: Blob 타입의 객체
• HTMLCanvasElement: canvas 엘리먼트

Options

다음과 같은 옵션을 사용할 수 있다.

| 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 | 캔버스 배경색 (배경이 투명한 이미지를 사용하면 영향을 받을 수 있다.) |

사이즈 값 조정

width, height 사이즈 값은 다음과 같은 조건을 따른다.

• width, height 둘다 있을때: width 값이 기준이 된다.
• width 값이 없을때: height 값이 기준이 된다.
• height 값이 없을때: width 값이 기준이 된다.
• width, height 둘다 없을때: width 값이 기준이 된다.

만약 height 값을 기준으로 사용하고 싶다면 width값을 0이나 undefined으로 넣어줘야한다.

배경색

기본값으로 transparent로 설정되어있다. 투명한 배경 이미지에 배경색을 넣고싶다면 #ffffff같은 값으로 넣어주면 배경색이 들어가게 된다.

Output

함수를 실행하고 반환해주는 데이터의 형식이다. 옵션에서 outputType 값에 맞는 형식으로 데이터가 리턴된다.

• base64: base64 형식의 문자
• blob: Blob 타입의 객체
• canvas: canvas 엘리먼트

Development

이 도구를 직접 수정할 수 있다.
/src에 있는 소스를 수정하고 다음과 같이 cli 명령을 통하여 빌드할 수 있다.

// development
npm run dev

// production
npm run build

// preview
npm run preview