image-resize

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

Demo

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

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

Installation

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

npm install image-resize
yarn add image-resize

Usage

먼저 ImageResize 객체를 만들어서 play()메서드를 실행하는 방식이다.

Module environment

import ImageResize from 'image-resize';

var imageResize = new ImageResize({
  format: 'png',
  width: 640
});
imageResize.play('image.jpg');

Vanilla environment

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

<script>
  var imageResize = new ImageResize({
    format: 'png',
    width: 640
  });
  imageResize.play('image.jpg');
</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

만들어진 인스턴스 객체에서 액션을 실행하는 메서드가 제공된다. 메서드를 사용하기 위하여 다음과 같이 인스턴스 객체를 만들었다.

var imageResize = new ImageResize();

좀더 자세하게 사용하는 방법에 대해서는 데모 소스를 참고.
https://github.com/kode-team/image-resize/blob/main/src/demo/index.js

play

실질적으로 리사이즈를 실행한다.

• Param String,HTMLInputElement,File,Blob
• Return string,object,HTMLCanvasElement

// 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

imageResize.updateOptions({
  width: 800,
  format: 'jpg',
  quality: .5
});

다음과 같이 다른 메서드와 같이 묶어서 사용할 수 있다.

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

// image url
imageResize.get('image.jpg').then();

// <input type="file" id="upload"/>
let res = await imageResize.get(document.getElementById('upload'));

resize

리사이즈 실행하는 역할을 한다.

• Param HTMLCanvasElement
• Return HTMLCanvasElement

imageResize.resize(document.getElementById('canvas')).then();

output

결과물을 출력하는 역할을 한다.

• Param HTMLCanvasElement
• Return string,object,HTMLCanvasElement

imageResize.output(document.getElementById('canvas')).then();

Mix methods

메서드들이 Promise로 리턴되기 때문에 다음과 같이 연결해서 사용할 수 있다.
체인 형식이다보니 중간에 다른 함수를 끼워넣어서 사용할 수 있다.

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);
}

Development

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

// development
yarn run dev

// production
yarn run build

// preview
yarn run start

Support

browser

• Google chrome
• Safari (문제가 생길 수 있습니다.)

node.js

이 모듈은 브라우저에서 이미지를 리사이즈 하기위하여 만들어졌다.
node.js 환경에서는 sharp 같은 모듈들을 사용을 권장드립니다.