web-dev-qa-db-ja.com

base64文字列をArrayBufferに変換します

Base64エンコード文字列をArrayBufferに変換する必要があります。 base64文字列はユーザ​​ー入力であり、電子メールからコピーして貼り付けられるため、ページが読み込まれたときに存在しません。可能であれば、サーバーに対してajax呼び出しを行わずに、javascriptでこれを実行したいと思います。

これらのリンクは面白いと思いましたが、助けにはなりませんでした。

ArrayBufferからbase64エンコードされた文字列

これは、ArrayBufferからbase64への逆の変換であり、逆の変換ではありません

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

これは良さそうに見えますが、コードの使用方法がわかりません。

変換を行う簡単な（おそらくネイティブの）方法はありますか？ありがとう

javascriptbase64arraybuffer
70
Tony

これを試して：

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;
}
112
Goran.it

TypedArray.from を使用：

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

Goran.it回答のforループバージョンと比較するパフォーマンス。

36
ofavre

Goran.itの答えは、javascriptのUnicode問題のために機能しません- 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);
26
Yaan

先月（2017-08）、信じられないほど高い使用率で5Mのダウンロードを行う小さなnpmパッケージであるbase64-arraybufferを見つけました。

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

最良の標準ソリューションを探している人にとって、これはそれかもしれません。

13
jv-dev

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タイプ（アプリケーション/オクテット）はおそらく不要です。

クロムでテスト済み。他のブラウザでも動作するはずです。

4
dinosaurclover

非同期解決策、データが大きい場合の方が良い：

// 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);
}
3
张浩然