JavaScript의 Base64 문자열에서 Blob을 만드는 방법은 무엇입니까?

JavaScript의 Base64 문자열에서 Blob 생성

문제

문자열에 base64로 인코딩된 바이너리 데이터가 있고 이 데이터가 포함된 Blob URL을 사용자에게 표시합니다. 특히 목표는 아래 코드 조각에서 볼 수 있듯이 base64 문자열에서 Blob 객체를 생성하는 것입니다.

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

해결책

base64 문자열을 Blob 객체로 디코딩하려면 JavaScript의 경우 다음 단계를 따르세요.

1. base64 디코딩 data: atob 함수를 사용하여 base64 문자열을 문자열로 디코딩합니다:

   const byteCharacters = atob(b64Data);

2. 바이트 문자를 바이트 값으로 변환: 배열 생성 각 문자에 대한 문자 코드 포인트(charCode)를 가져와서 바이트 값을 가져옵니다. 문자열:

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

3. 유형화된 바이트 배열 만들기: Uint8Array 생성자를 사용하여 바이트 값을 실제 유형의 바이트 배열로 변환:

   const byteArray = new Uint8Array(byteNumbers);

4. 배열로 감싸서 생성 Blob: 바이트 배열을 배열로 래핑하고 이를 Blob 생성자에 전달하여 Blob 개체를 만듭니다.

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

성능 최적화

코드 위의 내용은 완벽하게 작동하지만 이전에 바이트 문자를 더 작은 덩어리로 분할하면 성능이 향상될 수 있습니다. 처리.

전체 예

다음은 Blob에서 이미지 요소를 생성하는 전체 예입니다.

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;
};

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

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

위 내용은 JavaScript의 Base64 문자열에서 Blob을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!