[javascript] base64 문자열을 ArrayBuffer로 변환

Question 1

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

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

Base64 인코딩 문자열에 대한 ArrayBuffer

이것은 반대 방향이 아닌 ArrayBuffer에서 base64 로의 반대 변환에 관한 것입니다.

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

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

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

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

Question 3

TypedArray.from 사용 :

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

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

Question 4

– 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);

Question 5

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

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

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

Question 6

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

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

Question 7

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 유형 (애플리케이션 / 옥텟)은 아마도 불필요 할 것입니다.

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

Question 8

Node.js 사용자의 경우 :

const myBuffer = Buffer.from(someBase64String, 'base64');

myBuffer는 Uint8Array의 하위 클래스 인 Buffer 유형입니다. 불행히도 Uint8Array는 OP가 요청한대로 ArrayBuffer가 아닙니다. 그러나 ArrayBuffer를 조작 할 때 거의 항상 Uint8Array 또는 이와 유사한 것으로 래핑하므로 요청되는 내용에 가까워 야합니다.