Nice programing

base64 문자열을 ArrayBuffer로 변환

nicepro 2020. 10. 25. 13:01
반응형

base64 문자열을 ArrayBuffer로 변환


base64 인코딩 문자열을 ArrayBuffer로 변환해야합니다. base64 문자열은 사용자 입력이며 이메일에서 복사하여 붙여 넣으므로 페이지가로드 될 때 존재하지 않습니다. 가능한 경우 서버에 아약스 호출을하지 않고 자바 스크립트에서 이것을하고 싶습니다.

흥미로운 링크를 찾았지만 도움이되지 않았습니다.

Base64 인코딩 문자열에 대한 ArrayBuffer

이것은 ArrayBuffer에서 base64 로의 반대 변환에 ​​관한 것입니다.

http://jsperf.com/json-vs-base64/2

이것은 좋아 보이지만 코드를 사용하는 방법을 알 수 없습니다.

변환을 수행하는 쉬운 (아마도 네이티브) 방법이 있습니까? 감사


이 시도:

function _base64ToArrayBuffer(base64) {
    var binary_string =  window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array( len );
    for (var i = 0; i < len; i++)        {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}

TypedArray.from 사용 :

Uint8Array.from(atob(base64_string), c => c.charCodeAt(0))

Goran.it 답변의 for 루프 버전과 비교할 성능.


- Goran.it의 대답 때문에 자바 스크립트의 유니 코드 문제로 인해 작동하지 않습니다 https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding .

결국 Daniel Guerrero의 블로그에 제공된 함수를 사용하게되었습니다. http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/

함수는 github 링크에 나열되어 있습니다 : https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js

다음 행을 사용하십시오.

var uintArray = Base64Binary.decode(base64_string);  
var byteArray = Base64Binary.decodeArrayBuffer(base64_string); 

지난달 (2017-08) 다운로드 5 백만 건, 사용량이 매우 높은 소형 npm 패키지 인 base64-arraybuffer를 방금 찾았습니다.

https://www.npmjs.com/package/base64-arraybuffer

최상의 표준 솔루션을 찾고있는 사람이라면 이것이 가능할 것입니다.


Javascript는 훌륭한 개발 환경이므로이 작은 문제에 대한 해결책을 제공하지 않는 것보다 이상하게 보입니다. 이 페이지의 다른 곳에서 제공되는 솔루션은 잠재적으로 느립니다. 여기 내 해결책이 있습니다. base64 이미지 및 사운드 데이터 URL을 디코딩하는 내장 기능을 사용합니다.

var req = new XMLHttpRequest;
req.open('GET', "data:application/octet;base64," + base64Data);
req.responseType = 'arraybuffer';
req.onload = function fileLoaded(e)
{
   var byteArray = new Int8Array(e.target.response);
   // var shortArray = new Int16Array(e.target.response);
   // var unsignedShortArray = new Int16Array(e.target.response);
   // etc.
}
req.send();

기본 65 문자열의 형식이 잘못된 경우 전송 요청이 실패합니다.

MIME 유형 (애플리케이션 / 옥텟)은 아마도 불필요 할 것입니다.

크롬에서 테스트되었습니다. 다른 브라우저에서도 작동합니다.


비동기 솔루션, 데이터가 때 더 좋습니다.

// base64 to buffer
function base64ToBufferAsync(base64) {
  var dataUrl = "data:application/octet-binary;base64," + base64;

  fetch(dataUrl)
    .then(res => res.arrayBuffer())
    .then(buffer => {
      console.log("base64 to buffer: " + new Uint8Array(buffer));
    })
}

// buffer to base64
function bufferToBase64Async( buffer ) {
    var blob = new Blob([buffer], {type:'application/octet-binary'});    
    console.log("buffer to blob:" + blob)

    var fileReader = new FileReader();
    fileReader.onload = function() {
      var dataUrl = fileReader.result;
      console.log("blob to dataUrl: " + dataUrl);

      var base64 = dataUrl.substr(dataUrl.indexOf(',')+1)      
      console.log("dataUrl to base64: " + base64);
    };
    fileReader.readAsDataURL(blob);
}

const str = "dGhpcyBpcyBiYXNlNjQgc3RyaW5n"
const encoded = new TextEncoder().encode(str) // is Uint8Array
const buf = encoded.buffer // is ArrayBuffer

참고 URL : https://stackoverflow.com/questions/21797299/convert-base64-string-to-arraybuffer

반응형