クロム/ ffにcreateObjectURLを使用したオブジェクトURIへのデータURI

Question

私は画像のbase64文字列を持っています。これをObject URLに変換するにはどうすればよいですか？目的は、非常に大きなbase64文字列の代わりにDOMにBLOB URLを挿入することで、私のsvg-editorが高速化するかどうかを試してみることです。これは、SVGの編集にのみ使用されます。保存すると、オブジェクトURLはbase64に再度変換されます。

イメージサイズは、通常0.5 MB以上です。

私が試した：

var img = ...; //svg <image> 
var bb = new BlobBuilder(); 
var dataStr = img.getAttributeNS(XLINKNS, 'href'); //data:image/jpeg;base64,xxxxxx 
//dataStr = dataStr.replace(/data:.+;base64,/i, ''); //Strip data: prefix - tried both with & without 
//dataStr = window.atob(dataStr); //tried both with & without 

bb.append(dataStr); 
var blob = bb.getBlob 
img.setAttributeNS(XLINKNS, 'xlink:href', window.URL.createObjectURL(blob)); //blob:xxx 

私が代わりに何を得ることは、一見、破損したJPEG画像です。

TIA。上記の質問の作品に

Answer 1

Convert Data URI to File then append to FormData

答え。私はちょうど上の関数と画像から私のブロブを取得する必要がありますが正常にレンダリングされます。

私はbase64でエンコードされた文字列の一部を扱う文字列を見落としていたと思います。 String.charCodeAt()が答えです。

Answer 2

iframeにhtmlを表示するとどうなりますか？

iframe.src = "data:text/html,"+encodeURIComponent(window.btoa(text)); 

Answer 3

このコードを試してください。

function dataURItoBlob(dataURI) { 
    var mime = dataURI.split(',')[0].split(':')[1].split(';')[0]; 
    var binary = atob(dataURI.split(',')[1]); 
    var array = []; 
    for (var i = 0; i < binary.length; i++) { 
    array.push(binary.charCodeAt(i)); 
    } 
    return new Blob([new Uint8Array(array)], {type: mime}); 
} 

、あなたはこのうち、より良いパフォーマンスを得ることができた場合には興味があるだけ、この

var objecturl = URL.createObjectURL(dataURItoBlob('your data url goes here'));