Node.js에서 Base64 데이터를 이미지로 변환

이미지를 base64 문자열로 변환하고 다시 이미지로 변환하는 방법을 알아봅니다.

보너스:

또한 Jimp로 이미지를 압축하는 방법도 배우게 됩니다.

최근에 브라우저에서 이미지를 base64 형식으로 반환하는 프로젝트에 참여했고 이미지를 디스크에 써야 합니다. base64 , 버퍼, 바이너리 및 실제 이미지가 어떻게 작동하는지에 대한 자세한 설명을 얻을 수 있는지 알아보기 위해 조사를 했지만 nodejs와 관련된 솔루션을 찾을 수 없었습니다.
fs.readFile... 메서드로 이미지를 읽고 이를 이미지로 다시 파이프하여 완벽하게 작동하도록 하면 기본적으로 fs.readFile...가 Buffer를 반환하고 이것이 우리가 필요로 하는 것이기 때문에 완벽하게 작동합니다. 여기 예가 있습니다.

const fs = require("fs");
// Reads file in form buffer => <Buffer ff d8 ff db 00 43 00 ...
const buffer = fs.readFileSync("path-to-image.jpg");
// Pipes an image with "new-path.jpg" as the name.
fs.writeFileSync("new-path.jpg", buffer);

일반(base64) 문자열을 실제 이미지로 변환하려는 경우 상황이 조금 더 복잡해지는 경향이 있습니다. 실제 이미지로 저장하기 전에 먼저 문자열을 버퍼로 변환해야 합니다. 그렇지 않으면 문제가 발생합니다.

// Base64 => Buffer => Image

운 좋게도 Node.js는 Base64 인코딩 및 디코딩을 수행하는 데 사용할 수 있는 Buffer라는 기본 모듈을 제공합니다. 버퍼는 전역 개체로 사용할 수 있으므로 애플리케이션에서 이 모듈을 명시적으로 요구할 필요가 없습니다.

내부적으로 Buffer는 바이트 시퀀스 형태의 이진 데이터를 나타냅니다. Buffer 개체는 다양한 인코딩 및 디코딩 변환을 수행하는 여러 메서드를 제공합니다. 여기에는 UTF-8, UCS2, Base64, ASCII, UTF-16 및 HEX 인코딩 체계까지 포함됩니다.

Base64 인코딩

먼저 이미지를 base64로 변환한 다음 버퍼로 변환해 보겠습니다.

const fs = require("fs");
// Create a base64 string from an image => ztso+Mfuej2mPmLQxgD ...
const base64 = fs.readFileSync("path-to-image.jpg", "base64");
// Convert base64 to buffer => <Buffer ff d8 ff db 00 43 00 ...
const buffer = Buffer.from(base64, "base64");

Base64를 이미지로

이제 단 한 줄의 코드로 버퍼를 실제 이미지로 변환할 수 있습니다.

// Pipes an image with "new-path.jpg" as the name.
fs.writeFileSync("new-path.jpg", buffer);

보너스

대부분의 이미지가 거대한 크기로 제공되기 때문에 이미지 최적화는 오늘날 매우 중요합니다. Jimp을 사용하여 수신한 버퍼 데이터의 크기를 줄이고 실제 이미지로 변환하여 즉석에서 이미지 품질을 줄이는 방법을 보여줍니다.

설치Jimp:

yarn add jimp
   # or
npm install jimp

몇 줄의 코드만으로 이미지 품질을 50%까지 줄일 수 있습니다. 내 데이터 소스로 base64 문자열을 사용할 것입니다.

const Jimp = require("jimp");
const fs = require("fs");
// Base64 string
const data =
  "/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAP////////////////////////////////////////////////////////////////////////////////////8B///////////////////////////////////////////////////////////////////////////////////////AABEIAMgBLAMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/ACqJCgAoAKACgAoAWgAoAKBBQAUAFABQAUAFABQAmaAEoGFABQAUgFoAWgQUAFABQAUAJQAUAFABQMKACgAoASgAoAKACgBaYBQAUAFABQAUALQAUAFAgoAKACgAoAKAEoGJQAUAJQAtAC0AFIBaBBQAUAFABQAUAJQAlAwoAKAFoAKAEoAKACgAoAKAFpgFABQAUAFAC0AFAgoAKACgAoAKACgBCaAE/wA/WgYlAwoAKBC0gFoAWgQUAFABQAlAwoAKAEoAKACgAoAKACgAoAKACgAoAKAFpgFABQAUALQAUAFAgoAKACgAoAKAEoASgYlAxKAFoAKBDqQC0CCgAoASgAoAKBhQAUAJQAUAJQAUDCgAoEFABQAUALQAUALTAKACgAoAWgAoAKBBQAUAFABQA2gYUDEoAKAEoAWkIWgBaBC0AJQAUDCmFhM0BYKACgAoAKACgBKACgYUAFIAoAKACgBaAEoAdTEFABQAUALQAUAFAgoAKACgBDQMbQMKACgBKAFoAWkIWgAoEFACUxiUAFABQAUAFAC0AFABQAlABQMKACkAUAFABQAUAFADqYgoAKAFoAKBBQAUAFABQAhoGNoGFABQAUAFAC0CFpALQISmAlAwoAKAEoGFABQAUAFABmgAoAKACgAoAKACgAoAKACkAtAC0xBQAUALQAUCCgAoAKACgBDQMbQMKAEoAWgAoAWgQtIAoEJTGFACUDCgAoAMUALigVwxQFxMUDCgBKACgAoAKAFoAKAEoAKAFpAFADqYgoAKAFoAKBBQAUAFABQAhoGNoGFABSAWgAoEFABTGFAhKBhQAUCHYoC4tIQUAFACUAFAxKAEpgJQMKACgAoAKACgYUhC0CFoAWmAUAFAC0AFAgoAKACgAoASgYlABQAUgFoAKACgBOtMBKACgYUAAoELmgLBmgAoASgAoAKBhQAUAJQAUAFABQAUAFAxaQhaBBQAtMAoAKAFoAKBBQAUAFABQAUAJSGJQAUALQAUCCgBD60xiUDCgAoAKACgAoAKACgAoAKBBQAUDCgBKACgAoGFABQIWkAtAgoAWmAUAFAC0AFAgoAKACgAoAKACkAlABQMKACgQUDDrTATFACUDCgBaBBQAUAGKACgAoAKACgAoAKAEoGFACUALQAUALSEFABQAtMAoAKAFoAKBBQAUAFABQAUAFIBKBhQAUAJTAKACgAoAKACgAoAKAFxQIOlADaBjhQDCkIKACmAUDEoAKAEoGFAC0hC0AFACUALTAKAFoAKACgQUAFABQAUAFABSASgYUAFABTASgAoAKACgAoAKACgB1AhtAxKBjhQSxaQgoGJTAKBiUAFABQAUAFIBaACgAoAKYBQAUAFAC0CCgAoAKACgAoAKQBQAlACUDFoASgBKYBQAtABQAUAAoAdSJExQUJimFxwoEFIQUAFMYlAxKACgANAAKACkAtABQIKACmMKACgBaACgQUAFABQAUAFABSAKAEoAKBhQAUAJTAKACgAoAKACgB1IkKACgBaAEoAKACmMSgYlABQAGgAoAWkAUAFAgoAKYwoAKAFoAKBBQAUAFABQAUAFIAoASgdwxQFxKACgApgFABQAtACUAAoBjqQgoELQAUAJTASgYlAwoAKACgBKQxaBC0CCgAoAKACmMKACgBaACgQUAFABQAUAFABSAKACgBKACgYUAJTAKAFoAKAEoBCUAPpCCgQtACUAFMYlAxKACgAoAKACkAtAgoAWgAoASgApjCgAoAKAFoEFABQAUAFABQAUgCgBKACgBaAEoGFACUALTEFACUDCgBaBC5oAKAEoAKACgBKBhQAUgCgBaBBQAUALQAUAFACUxhQAUALQAUCCgAoAKACgAoAKQBQAUAFABQAlAwoAKACmAUCDFABQAUAFABQAUAJQMKACgAoAKQC0AFAgoAWgAoAKACgBKYwoAKACgBaACgAoEFABQAUAFABQAtIBKAEoAWgAoAKAEpgGKAFpAFABTEJQMKBiUAFIBaAEoAKACgBaAFoEFABQAUAFABQAlMYUAFABQAtABQAUCCgAoAKACgAoAKQBQAlAC0AFABQAUwCgApAGKAEphYM0DsHNACUALSAKACgAoAKBC0AFABQAUAFABQAUAJTGFABQAUALQAUAFAgoAKACgAoAKACkAUAFABQAUAFABQAUAFABQAUAJQAUAFABQAtACUDCgQtABQAUAFABQAUAFMAoASgYUAFABQAUALQAUCCgAoAKACgAoAKQBQAUAFABQAUAFABQAUAFABQAUAFABQAUAFACUDFoEFABQAUAFABQAUAFMAoASgYUAFABQAUALQAUAFABQIKACgAoAKQBQAUAFABQAUAFABQAUAFAC0CCgAoAKACgBKBhQAUAFABQAUAFABTAKACgAoA/wD/2Q==";
// Convert base64 to buffer => <Buffer ff d8 ff db 00 43 00 ...
const buffer = Buffer.from(data, "base64");
Jimp.read(buffer, (err, res) => {
  if (err) throw new Error(err);
  res.quality(5).write("resized.jpg");
});

Jimp는 nodejs에서 실제 이미지로 수행하고자 하는 거의 모든 것을 해결하고 종속성이 없기 때문에 Jimp 제작자에게 약간의 추가 크레딧을 주고 싶습니다. 전자 응용 프로그램에서 사용하는 데 아무런 문제가 없었습니다.

결론

우리는 다음을 수행할 수 있었습니다.

여러 단계의 nodejs에서 이미지가 작동하는 방식을 이해합니다.

버퍼에서 base64로 변환합니다.

버퍼에서 실제 이미지로 변환합니다.

Jimp를 사용하여 이미지 크기를 줄이십시오.

여기까지 했다면 축하한다고 🍻 🍻 너무 멋져요 :).

도움이 되셨기를 바랍니다.

해피코딩💻 🙂