[JavaScript] base64 데이터를 다룰 때 만난 TypeError 에러, base64를 Blob로 변환하여 해결!

1. canvas에서 base64 데이터를 다룰 때 만난 TypeError 에러

react-camera-pro를 이용해 캡처한 이미지를 base64 데이터로 받을 수 있었다. 캡처한 이미지를 mind-ar에서 Target으로 사용하기 위해 compile 하는 과정에서 다음과 같은 에러가 발생했다.

Uncaught (in promise) TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.

해당 에러는 drawImage 메서드가 올바른 유형의 이미지를 받지 않아서 발생하는 것이다. drawImage 메서드는 <canvas> 요소의 2D 렌더링 컨텍스트를 사용하여 이미지를 그릴 때 사용된다.

 

2. base64를 Blob로 변환

에러가 발생한 이유는 URL.createObjectURL()의 인수로 Blob가 들어가야 하는데 base64가 들어갔기 때문이었다. 따라서 base64 데이터를 Blob로 변환해야 했다. 아래는 base64 데이터를 Blob로 변환하는 코드이며 이 코드를 이용해 base64 이미지를 mind-ar에서 사용하는 Target(.mind 파일)으로 compile하는데 성공했다.

const loadImage = async (base64Data) => {
  const blob = dataURItoBlob(base64Data);
  const img = new Image();

  return new Promise((resolve, reject) => {
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = URL.createObjectURL(blob);
  });
};

// base64 데이터를 Blob으로 변환하는 함수
function dataURItoBlob(dataURI) {
  const byteString = atob(dataURI.split(',')[1]);
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);

  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  return new Blob([ab], { type: mimeString });
}

 

3. URL.createObjectURL()에 대한 부언

URL.createObjectURL()는 웹 플랫폼에서 사용할 수 있는 중요한 웹 API 중 하나이다. 이 메서드는 브라우저 상에서 Blob 또는 File 객체와 같은 자료 구조를 URL로 변환해 주는 역할을 한다. 주로 브라우저에서 동적으로 생성된 파일, 미리 보기 이미지, 비디오, 오디오 파일 등을 다룰 때 사용된다. URL.createObjectURL()의 주요 역할은 다음과 같다.

• Blob 또는 File 객체를 URL로 변환: 이 메서드를 사용하면 Blob 또는 File 객체를 브라우저 상에서 고유한 URL로 변환할 수 있다.
• 자료의 렌더링 및 미리보기: 변환된 URL을 사용하면 해당 자료를 웹 페이지에서 렌더링 하거나 미리 보는 등의 작업을 수행할 수 있다. 예를 들어 이미지를 동적으로 표시하거나 비디오 또는 오디오를 재생할 수 있다.
• 다운로드 링크 생성: Blob 또는 File을 URL로 변환한 후, 사용자에게 다운로드 링크를 제공할 수 있다.