Javascriptでブロブを開く

Question

私はcroppie jsで作業していて、libはblobオブジェクトを返します。

私のウェブサイトには2つのオプションがありますが、イメージの一部にテキストを付けるか、パート自体を持つためにBLOBを使用する必要があります。画像要素

のSRCの分野でそれを置くためのURLは、私がhttps://developer.mozilla.org/fr/docs/Web/API/Blob

function write_img(blob) 
{ 
    var reader = new FileReader(); 
    reader.addEventListener("loadend", function() { 
     // reader.result contient le contenu du 
     // blob sous la forme d'un tableau typé 
     }); 
    reader.readAsDataURL(blob); 
    document.getElementById("result").innerHTML += "<img src=\"" + reader.result + "\" >"; 
} 

でこれを見つけた。しかし、それはnullを返し、助けることができる誰か？

Answer 1

しかし、それはnull、任意のヘルプを返しますか？

loadendイベントがまだ開始されていないため、nullを返します。

このライン

document.getElementById("result").innerHTML += "<img src=\"" + reader.result + "\" >"; 

ニーズloadendイベントハンドラ

function write_img(blob) 
{ 
    var reader = new FileReader(); 
    reader.addEventListener("load", function() { 
     document.getElementById("result").innerHTML += "<img src=\"" + reader.result + "\" >"; 
    }); 
    reader.readAsDataURL(blob); 
} 

Answer 2

あなたが画像を表示したい場合、それはより多くのメモリ&時間を要するため、BASE64を避ける... URL.createObjectURLを使用して内部でなければbase64をエンコード/デコードするには

オブジェクトURLは読み込み速度が速く、同期性もあります

function write_img(blob) { 
    var img = new Image() 

    img.src = URL.createObjectURL(blob) 
    img.onload = function() { 
    document.getElementById('result').appendChild(img) 
    // revoke the url when it's not needed anymore. 
    URL.revokeObjectURL(this.src) 
    } 

    img.onerror = function() { 
    // not an image. 
    } 
}