[node.js] sharp 패키지 써보기

필요 지식
#node #sharp

npmjs.com 에 등록된 많은 패키지 중 이미지 처리에 매우 좋은 sharp 패키지를 사용해보겠습니다.

경로 : https://www.npmjs.com/package/sharp
api : http://sharp.pixelplumbing.com/en/stable/
설치 : npm install sharp
현재버전 : 0.21.3

간단하게 사용할수 있도록 만들어졌기 때문에 api 설명 만으로 대부분 쉽게 만들수 있지만 샘플 이미지와 간단한 코드를 통해 어떤 결과를 기대할 수 있는지 몇 가지만 살펴보도록 하겠습니다.

샘플로 사용할 이미지는 쇼핑몰에서 흔히 사용하는 형태인 제품 카탈로그 이미지입니다.(저작권 보호를 위해 이미지 내용은 살짝 가림)
800*3604 크기의 상당히 큰 사이즈의 이미지이므로 최종 샘플 코드와 함께 글의 맨 밑에 붙이겠습니다.

이미지 리사이즈

resize 함수를 사용하면 간단하게 리사이즈 할 수 있습니다.
여러 옵션이 존재하므로 세부 옵션은 api를 통해 확인하는 것이 좋습니다.
옵션에 따라 이미지의 일부를 crop하면서 리사이즈 할 수도 있고 원본 비율을 무시한채 찌그러진 이미지로 리사이즈도 가능합니다.

//비율을 유지하며 리사이즈 한다. width가 변경되는 비율만큼 height도 변경된다.
sharp(imagePath).resize({width:400})    
                .toFile("sharp_resize1.jpg");
//비율을 유지하며 리사이즈 한다. left top을 기준으로 비율에 맞지 않는 부분은 잘라낸다.
sharp(imagePath).resize({width:400, height:1000, position:"left top"})    
                .toFile("sharp_resize2.jpg");
//원본 비율을 무시하고 리사이즈 한다.
sharp(imagePath).resize({fit:'fill', width:400, height:600})    
                .toFile("sharp_resize3.jpg");

이미지 확장

원본 이미지의 외곽에 테두리를 추가하고 싶을때 사용합니다. 추가하는 만큼 이미지 사이즈도 커집니다.

//이미지의 외곽을 확장한다.
sharp(imagePath).extend({top:10, bottom:5, left:10, right:20, background:{r:125,g:0,b:0}})    
                .toFile("sharp_extend.jpg");

이미지 추출

이미지의 일부를 추출할 수 있습니다. crop 기능입니다.

//이미지의 일부를 추출한다.
sharp(imagePath).extract({left:0, top:600, width:800, height:700})    
                .toFile("sharp_extract.jpg");

이미지 처리

그외 이미지를 회전하거나 반전, 색조 변경 등도 가능합니다.
아래 샘플보다 더 많은 함수가 있지만 샘플 이미지로 쉽게 확인 가능한 몇 가지만 작성해보겠습니다.

sharp(imagePath).rotate(90)    //이미지를 회전한다.
                .toFile("sharp_rotate.jpg");
sharp(imagePath).flip()    //이미지를 상하 뒤집는다.
                .toFile("sharp_flip.jpg");
sharp(imagePath).flop()    //이미지를 좌우 뒤집는다.
                .toFile("sharp_flop.jpg");
sharp(imagePath).tint({r:0,g:0,b:255})    //이미지 색조를 변경한다.
                .toFile("sharp_tint.jpg");
sharp(imagePath).greyscale()    //8비트 흑백 이미지로 변경한다.
                .toFile("sharp_greyscale.jpg");

정리

매우 간단하죠? sharp 패키지는 node.js 서버에서 이미지 처리를 할 수 있는 기능을 제공할 뿐 아니라 매우 간단하게 적용할 수 있도록 쉬운 인터페이스를 가지고 있습니다.
서버에서 이미지 처리가 필요한 경우(업로드 된 이미지의 썸네일 이미지나 preview 이미지를 만들어야 하는 경우)에 sharp는 매우 좋은 패키지입니다.

아래 샘플이미지를 sharp.jpg 로 저장 후 위 코드를 실행하면 각 함수에 맞게 처리된 이미지가 생성 됩니다. 직접 실행 해 보세요!

최종 샘플

const sharp = require("sharp");
let imagePath = "sharp.jpg";
sharp(imagePath).resize({width:400})    
                .toFile("sharp_resize1.jpg");
//비율을 유지하며 리사이즈 한다. left top을 기준으로 비율에 맞지 않는 부분은 잘라낸다.
sharp(imagePath).resize({width:400, height:1000, position:"left top"})    
                .toFile("sharp_resize2.jpg");
//원본 비율을 무시하고 리사이즈 한다.
sharp(imagePath).resize({fit:'fill', width:400, height:600})    
                .toFile("sharp_resize3.jpg");
//이미지의 외곽을 확장한다.
sharp(imagePath).extend({top:10, bottom:5, left:10, right:20, background:{r:125,g:0,b:0}})    
                .toFile("sharp_extend.jpg");
//이미지의 일부를 추출한다.
sharp(imagePath).extract({left:0, top:600, width:800, height:700})    
                .toFile("sharp_extract.jpg");
sharp(imagePath).rotate(90)    //이미지를 회전한다.
                .toFile("sharp_rotate.jpg");
sharp(imagePath).flip()    //이미지를 상하 뒤집는다.
                .toFile("sharp_flip.jpg");
sharp(imagePath).flop()    //이미지를 좌우 뒤집는다.
                .toFile("sharp_flop.jpg");
sharp(imagePath).tint({r:0,g:0,b:255})    //이미지 색조를 변경한다.
                .toFile("sharp_tint.jpg");
sharp(imagePath).greyscale()    //8비트 흑백 이미지로 변경한다.
                .toFile("sharp_greyscale.jpg");