[javascript] 자바스크립트 이미지를 base64로 변환

참고: https://levelup.gitconnected.com/how-to-convert-image-to-base64-by-javascript-d110556de37f

이 포스트에서는 이미지를 base64로 변환하는 방법에 대해 알아보겠습니다. 먼저 자주 접할 수 있는 다음의 세 가지 시나리오에 대해 설명하겠습니다:

1. url에서 가져온 이미지를 base64로 변환
2. 로컬에서 선택한 이미지를 base64로 변환
3. 클립보드의 이미지를 base64로 변환

url의 이미지를 base64로 변환

url 이미지를 base64로 변환하려면 먼저 이미지를 다운로드해야 합니다. 이미지가 로드되면 canvas 요소를 사용하여 캔버스에 이미지를 그리고 toDataURL() 메소드를 사용하여 이미지를 base64로 변환할 수 있습니다. 다음의 코드는 이미지를 base64로 변환하는 예제입니다:

function convertImageToBase64(imgUrl, callback) {
  const image = new Image();
  image.crossOrigin='anonymous';
  image.onload = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.height = image.naturalHeight;
    canvas.width = image.naturalWidth;
    ctx.drawImage(image, 0, 0);
    const dataUrl = canvas.toDataURL();
    callback && callback(dataUrl)
  }
  image.src = imgUrl;
}

위의 함수는 다음의 단계를 거쳐 진행됩니다:

1. Image 객체 생성
2. 이미지의 origin이 클라이언트와 다를 경우를 대비해 Image 객체에 crossOrigin 속성을 anonymous로 설정
3. Image 객체에 onload 이벤트 핸들러 등록
4. onload 이벤트에서 canvas를 생성하고 거기에 이미지를 그린 다음 toDataURL() 메소드를 통해 이미지를 base64로 변환
5. Image 객체의 url을 이미지 url로 할당

다음과 같은 스크립트를 사용하여 이미지를 base64로 변환할 수 있습니다.

convertImageToBase64('https://miro.medium.com/fit/c/64/64/1*3wTm70KPAVCovuotmFReJA.png', console.log);

로컬에서 선택한 이미지를 base64로 변환

로컬에 있는 파일을 업로드 하려는 경우 input 요소를 사용하거나 showOpenFilePicker를 사용하여 파일을 선택할 수 있습니다. 다음의 예제를 통해 input 요소를 사용하여 로컬에서 이미지를 선택하는 방법을 알아보겠습니다.

// html
<input type="file" accept="image/*" class="local" />

// javascript
const file = document.querySelector(".local");
file.addEventListener("change", (event) => {
  const selectedfile = event.target.files;
  if (selectedfile.length > 0) {
    const [imageFile] = selectedfile;
    const fileReader = new FileReader();
    fileReader.onload = () => {
      const srcData = fileReader.result;
      console.log('base64:', srcData)
    };
    fileReader.readAsDataURL(imageFile);
  }
});

위의 스크립트는:

1. input 요소를 생성하고 type을 file로 지정
2. input 요소의 change 이벤트 핸들러 등록
3. 선택된 파일을 input 요소의 files 속성에서 가져오기
4. FileReader를 사용하여 이미지를 base64로 변환

클립보드의 이미지 데이터를 base64로 변환

클립보드에서 이미지를 붙여넣는 작업은 일반적으로 많이 사용됩니다. 예를 들어 텍스트를 이미지로 잘라 스타일을 원본 그대로 공유할 수 있습니다. 클립보드에서 읽은 데이터는 blob 타입이므로 FileReader를 사용하여 데이터를 base64로 변환할 수 있습니다. 다음 예제를 보겠습니다:

async function parseClipboardImageData() {
  const items = await navigator.clipboard.read()
  for (let item of items) {
    for (let type of item.types) {
      if (type.startsWith("image/")) {
        return item
          .getType(type)
          .then(blob => {
            return new Promise((resolve) => {
              const fileReader = new FileReader();
              fileReader.onload = () => {
                const srcData = fileReader.result;
                resolve(srcData);
              };
              fileReader.readAsDataURL(blob);
            })
          })
      }
    }
  }
}

navigator.clipboard.read() 메소드로 클립보드의 데이터를 가져옵니다. 이미지의 경우 FileReader를 사용하여 데이터를 base64 문자열로 변환할 수 있습니다.

정리

이 포스트에서는 이미지를 base64로 변환하는 방법을 알아봤습니다. base64 문자열을 생성하기 위해서는 다음의 두 가지 방법이 있습니다:

1. canvas 요소의 toDataURL() 메소드 사용
2. FileReader의 readAsDataURL() 메소드 사용

이러한 방법을 사용하여 이미지 url/data를 세 가지 방법으로 base64로 변환해 봤습니다.

관련 글

자바스크립트 base64 사용 방법 (btoa, atob)