개요

sharp.js를 통해서 여러가지 이미지 처리를 할 수 있다.
이 글에서는 blurhash를 뒷배경으로 깔아보자.

준비사항

1. 이미지 준비

아래와 같이 무료 이미지를 준비해둔다.

https://www.pngwing.com/ko/free-png-bmdtr

2. blurhash, sharp 설치

yarn add sharp --save
yarn add blurhash --save
yarn add @types/sharp --dev

예제

우선 다음 단계로 진행한다.
1. blurhash 값 생성
2. blurhash image decoding
3. 원본 이미지와 합치기

1. blurhash 값 생성

sharp를 통해서 image를 로드하고, blurhash값을 생성해준다.

async test(): Promise<void> {
    const originalImageFilePath = path.join(__dirname, 'test.png');

    const { data: buffer, info: metadata } = await sharp(originalImageFilePath)
      .raw() // uint8 array로 output을 바꾸어준다.
      .ensureAlpha() // 알파값이 없을 경우에도 채워서 값을 생성해준다.
      .toBuffer({ resolveWithObject: true }); // metdadata 정보도 포함시켜 결과를 반환한다.

   const blurhashStr = encode(Uint8ClampedArray.from(buffer), metadata.width!, metadata.height!, 4, 4); // 4, 4로 설정된 x,y component 갯수에 대한 참조문서는 https://github.com/woltapp/blurhash#how-do-i-pick-the-number-of-x-and-y-components 여기서 참조해서 조절하면 좋다.
}

2. blurhash decode

async test(): Promise<void> {
    ... // 이전 내용
    const BACKDROP_IMAGE_SIZE = 2000;
    const backgroundRawImage = decode(blurhashStr, BACKDROP_IMAGE_SIZE, BACKDROP_IMAGE_SIZE);
}

3. 원본 image와 합치기

아래는 sharp의 composite method를 통해서 이미지를 합친다.

async test(): Promise<void> {
      ... // 이전 내용
     const outImagePath = path.join(__dirname, 'out.png');
      const innerImage = await sharp(originalImageFilePath)
          .resize({ width: 1000, height: 1000, fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } }) // background는 default가 black으로 설정된다.
        .png()
        .toBuffer();

     await sharp(backgroundRawImage, {
      raw: { width: BACKDROP_IMAGE_SIZE, height: BACKDROP_IMAGE_SIZE, channels: 4 }, // channel은 r,g,b,a 4개이다.
    }).png()
      .composite([
        {
          input: innerImage,
          left: 500, // 위치값은 적절하게 조절해준다.
          top: 500,
        },
      ])
      .toFile(outImagePath);
}

결과물

위와 같이 sharp를 활용하면 손쉽게 이미지를 조작할 수 있다.

출처

728x90