JavaScript에서 Base64 데이터를 Blob으로 효율적으로 디코딩하려면 어떻게 해야 합니까?

Base64 데이터를 Blob으로 디코딩: JavaScript 개발자를 위한 종합 가이드

JavaScript에서는 base64로 인코딩된 바이너리 데이터로 작업하는 것이 일반적인 작업입니다. 이 데이터를 사용자에게 표시하려면 Blob 객체를 생성해야 하는 경우가 많습니다. 이 문서에서는 Base64 데이터를 Blob으로 디코딩하는 방법에 대한 철저한 가이드를 제공하여 엄청나게 큰 데이터 URL을 처리하는 특정 과제를 해결합니다.

Base64를 바이트 배열로 변환

base64 문자열을 디코딩하려면 이진 데이터로 변환하려면 atob 함수를 활용할 수 있습니다. 인코딩된 데이터의 각 바이트에 대해 한 문자가 포함된 새 문자열을 반환합니다.

이러한 문자를 해당 바이트 값으로 변환하기 위해 charCodeAt 메서드를 사용하여 각 문자를 반복하여 바이트 번호 배열을 얻습니다.

const byteCharacters = atob(b64Data);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}

형식 있는 바이트 배열 생성

Uint8Array 생성자를 사용하여 바이트 숫자 배열을 기본 바이너리 데이터를 나타내는 배열과 유사한 객체인 형식화된 바이트 배열로 변환합니다.

const byteArray = new Uint8Array(byteNumbers);

Blob으로 변환

마지막으로 형식화된 바이트 배열을 래핑할 수 있습니다. 배열에 넣고 Blob 생성자에 전달하여 Blob 객체를 생성합니다.

const blob = new Blob([byteArray], { type: contentType });

최적화 성능

위 코드가 작동하는 동안 바이트 문자를 한 번에 모두 처리하는 것이 아니라 더 작은 조각으로 처리하면 성능이 향상될 수 있습니다.

아래 b64toBlob 함수는 슬라이스 크기를 통해 이러한 개선을 보여줍니다. 512바이트로 메모리 사용량과 성능 간의 적절한 균형을 제공하는 것으로 확인되었습니다.

const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, { type: contentType });
  return blob;
};

전체 예

b64toBlob의 사용법을 보여주기 위해 이미지 요소를 생성하고 해당 소스를 base64 인코딩 이미지에서 생성된 Blob URL로 설정할 수 있습니다.

const blob = b64toBlob(b64Data, 'image/png');
const blobUrl = URL.createObjectURL(blob);

const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

다음 단계를 수행하여 제공된 코드 조각을 활용하면 Base64 데이터를 JavaScript의 Blob 객체로 효과적으로 디코딩하여 데이터 제한에 직면하지 않고 사용자에게 대규모 바이너리 데이터를 표시할 수 있습니다. URL.

위 내용은 JavaScript에서 Base64 데이터를 Blob으로 효율적으로 디코딩하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!