base64 to blob

blob값을 api로 보내 s3에 저장하는 과정에서 저장은 되었지만 깨진 이미지가 저장되는 문제를 겪었다.

blob값을 생성하는 방식 2가지를 시도했는데,
둘다 size와 데이터가 잘 들어가고 올바를 형태이긴 했다.

일단 두번째 방식이 성공한 이유를 먼저 말하자면,
Blob생성 과정에서 데이터 변환이 더 명확하게 이루여져서 데이터 변환 오류를 방지 할 수 있는 코드였기 때문이다.
즉, 첫번째 방식에서 데이터 변환시 데이터가 깨지는 현상이 발생했다는 것.

1번

1. atob을 사용하여 Base64 문자열을 바이너리 문자열로 디코딩
2. 디코딩된 바이너리 문자열을 그대로 Blob으로 변환

const binaryString = atob(bas64String.split(",")[1]);
const blob = new Blob([binaryString], { type: "image/png" });

return blob;

2번

1. atob을 사용하여 Base64 문자열을 바이너리 문자열로 디코딩
2. ArrayBuffer를 생성하고, 바이너리 데이터를 ArrayBuffer에 복사
3. ArrayBuffer에서 Blob 생성

const binaryString = atob(bas64String.split(",")[1]);
const arrayBuffer = new ArrayBuffer(binaryString.length);
const view = new Uint8Array(arrayBuffer);
for (let i = 0; i < binaryString.length; i++) {
  view[i] = binaryString.charCodeAt(i) & 0xff;
}

reurn new Blob([arrayBuffer], { type: "image/png" })

참고로,

• ArrayBuffer 및 Unit8Array는 js에서 일반적으로 사용하는 데이터 구조라서, 다양한 js 환경에서 호환성을 높일 수 있다고 한다. 즉, 이식이 쉬움.
• 데이터 처리 할때도 ArrayBuffer를 사용하면 메모리 효율성이 향상되어 이미지 같은 큰 데이터 처리시 유용함.
• Uint8Array로 데이터를 복사하면 데이터 타입 변환 오류를 방지할 수가 있음. & 0xff를 사용하여 각 바이트의 값이 0에서 255 사이로 제한되므로 데이터가 잘못 해석되거나 손실되는 것도 방지 가능함.