javascript - blob を base64 に変換する

Question

これは、文字列に対して実行Blobしたいコードのスニペットです。Base64

このコメント部分は機能し、これによって生成された URL が img src に設定されている場合、画像が表示されます。

var blob = items[i].getAsFile();
//var URLObj = window.URL || window.webkitURL;
//var source = URLObj.createObjectURL(blob);
//console.log("image source=" + source);

var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);

問題は下のコードにあり、生成されたソース変数はnullです

アップデート：

上記のコードのように、Blob ファイルから Base64 文字列を作成できるように JQuery でこれを行う簡単な方法はありますか?

score 413 · Accepted Answer

var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
  var base64data = reader.result;                
  console.log(base64data);
}

base64 にエンコードするドキュメントを形成するreadAsDataURL

有能な機能としてawait：

function blobToBase64(blob) {
  return new Promise((resolve, _) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

注: blob の結果は、Base64 でエンコードされたデータの前にある Data-URL 宣言を最初に削除しないと、Base64 として直接デコードできません。Base64 でエンコードされた文字列のみを取得するには、最初に data: / ;base64 を結果から削除します。

score 45 · Accepted Answer

これは私のために働いた：

var blobToBase64 = function(blob, callback) {
    var reader = new FileReader();
    reader.onload = function() {
        var dataUrl = reader.result;
        var base64 = dataUrl.split(',')[1];
        callback(base64);
    };
    reader.readAsDataURL(blob);
};

score 6 · Accepted Answer

問題は、base 64 画像をアップロードする必要があり、blob の URL があることです。すべての html 5 ブラウザーで機能する答えは次のとおりです。

  var fileInput = document.getElementById('myFileInputTag');
  var preview = document.getElementById('myImgTag');

  fileInput.addEventListener('change', function (e) {
      var url = URL.createObjectURL(e.target.files[0]);
      preview.setAttribute('src', url);
  });
function Upload()
{
     // preview can be image object or image element
     var myCanvas = document.getElementById('MyCanvas');
     var ctx = myCanvas.getContext('2d');
     ctx.drawImage(preview, 0,0);
     var base64Str = myCanvas.toDataURL();
     $.ajax({
         url: '/PathToServer',
         method: 'POST',
         data: {
             imageString: base64Str
         },
     success: function(data) { if(data && data.Success) {}},
     error: function(a,b,c){alert(c);}
     });
 }

score 4 · Accepted Answer

async function blobToBase64(blob) {
  return new Promise((resolve, _) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

let blob = null; // <= your blob object goes here

blobToBase64(blob)
  .then(base64String => console.log(base64String));

以下も参照してください。

https://gist.github.com/moosetraveller/723987931308c9ec63725c14cdcbc3e7

score 0 · Accepted Answer

リストに保存するbase64値にアクセスできるものが欲しかったので、イベントリスナーを追加するとうまくいきました。必要なのは、画像ブロブを読み取り、結果で base64 を返す FileReader だけです。

createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    const supportedImages = []; // you can also refer to some global variable
    reader.addEventListener(
      'load',
      () => {
        // reader.result will have the required base64 image
        const base64data = reader.result;
        supportedImages.push(base64data); // this can be a reference to global variable and store the value into that global list so as to use it in the other part
      },
      false
    );
    // The readAsDataURL method is used to read the contents of the specified Blob or File.
    if (image) {
      reader.readAsDataURL(image);
    }
 }

最後の部分は、指定された Blob のコンテンツを読み取るために使用される非常に重要な readAsDataURL です。

javascript - blob を base64 に変換する

12 に答える 12

Related

Reference