大きな画像にデータを埋め込む方法uri

Question

私は現在、大きなJS画像を使って受け取った大きなbase64画像をHTMLページに埋め込みたいと考えています。私はこれをローカルでうまくやったが、別の場所から引っ張ってきたので、画像の一部が読み込まれ、「画像が壊れているか、切り捨てられている。これは<img>タグの両方で発生し、<canvas>を使用すると、uriから大きな画像を読み込む方法はありますか？または、base64文字列の画像を表示する別の方法ですか？

javascript変数としてbase64文字列を指定するとうまくいきますが、外部スクリプトの変数としてインクルードすると、このエラーが発生します。文字列を分割してそれを元に戻すと、これを修正しますか？

Answer 1

巨大なファイルにはデータURLを使用しないでください。

次のJavaScript関数使用して、一時的ブロブURLにBLOBオブジェクトやBLOBオブジェクトにあなたのbase64でURLを変換しようとすることができます：ここから

function dataurlToBlobUrl(url){ 
    var parts = url.split(',',2); 
    var mime = parts[0].substr(5).split(';')[0]; 
    var blob = b64toBlob(parts[1],mime); 
    return URL.createObjectURL(blob); 
} 

そしてb64toBlob機能を： https://stackoverflow.com/a/16245768/5406901

blob URLが不要になったときは、必ず「URL.revokeObjectURL」を使用してください。