JavaScript에서 Base64 문자열을 Blob으로 변환하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript에서 Base64 문자열을 Blob으로 변환하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-12-24 16:09:15

원래의

771명이 탐색했습니다.

How to Convert a Base64 String to a Blob in JavaScript?

JavaScript의 Base64 문자열에서 Blob 생성

base64 문자열로 인코딩된 바이너리 데이터로 작업할 때 변환이 필요할 수 있습니다. Blob 객체로 변환합니다. 이는 웹 브라우저에 데이터를 표시하거나 사용자 장치에 저장하는 데 유용할 수 있습니다.

Base64 문자열 디코딩

첫 번째 단계는 base64를 디코딩하는 것입니다. 문자열을 바이트 문자의 문자열로 변환합니다. 이는 atob 함수를 사용하여 달성할 수 있습니다.

const byteCharacters = atob(b64Data);

로그인 후 복사

바이트 문자를 바이트 배열로 변환

다음으로 바이트 문자를 실제 유형의 바이트 배열로 변환합니다. 이는 바이트 문자를 Uint8Array 생성자에 전달하여 수행할 수 있습니다.

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

const byteArray = new Uint8Array(byteNumbers);

로그인 후 복사

Blob 객체 생성

마지막으로 래핑할 수 있습니다. 배열의 바이트 배열을 Blob 생성자에 전달하여 Blob 객체.

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

로그인 후 복사

성능 최적화

위 코드는 작동하지만 바이트 문자를 더 작은 조각으로 처리하면 성능이 향상될 수 있습니다. 일반적으로 512바이트의 슬라이스 크기가 좋은 선택입니다.

함수 예시

다음은 최적화된 접근 방식을 사용하여 base64 문자열을 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;
};

로그인 후 복사

사용법 예

이 함수를 사용하려면 base64 문자열과 콘텐츠 유형을 인수로 전달하기만 하면 됩니다.

const blob = b64toBlob(b64Data, contentType);

로그인 후 복사

그런 다음 결과 Blob 개체를 사용하여 이미지를 생성하거나 다운로드할 수 있습니다. 데이터.

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