0

Firefoxによる大きな画像の積極的なキャッシュ解除/ガベージコレクションを回避するために、画像への参照を保存する方法を実験してきました。'new Image（）'オブジェクトへの参照を保持することは機能しているように見えますが、大量のメモリを使用します。

私は今使って実験しています

$.ajax({
   url: "http://localhost/360/img/frames/compressed/frame0470.jpg",
   dataType: "text",
   success: function(r) {
      console.log(r);
   }
});

画像のbase64文字列を取得します（おそらく、画像オブジェクトよりも少ないメモリに保存でき、Firefoxの画像ガベージコレクションの対象にはなりません）。しかし、どうすればこれをjpegに戻すことができますか？

4

2 に答える 2

0

私はあなたがそれを達成したい理由を本当に理解していませんが、あなたの質問に答えるために：

基本的な考え方：

そのデータをBase64にエンコードする必要があります。

var base64Data = Base64.encode(r);

Base64画像の表示：

$('<img>') // create new image
    .attr('src', 'data:image/jpeg;base64,' + base64Data) // set image data as b64
    .appendTo('body'); // add the image tag to the body element (or any other)

しかし、実際にはもう少し複雑に見えます：http: //emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html

于 2012-04-24T12:26:42.007 に答える
0

どちらかを達成したい理由はわかりませんが、jQueryによって提供される型に限定するのではなく、XHRでバイナリデータを取得できるはずです。

まず、ここでMDCドキュメントを読んで、画像の適切なバイナリ文字列を取得します https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Receiving_binary_data_in_older_browsers

次に、バイナリ文字列は。によってbase64に変換できますwindow.btoa()。

第三に、base64画像文字列はデータURLを作成することで表示できます。あなたはすでにそれを行う方法を知っていると確信しています。

Javascriptは内部でUCS-2を使用するため、文字列の各文字は実際にはメモリ内で4バイトであるため、実際のバイナリデータと比較すると、バイナリ文字列のメモリコストは4倍になります。Base64文字列は4*1.3=5.2倍のメモリを消費します。Base64データは、元のデータより130％大きくなっています。

Javascriptでバイナリデータを処理するための適切な方法は、Blobオブジェクトを操作することです。しかし、とにかくBlobを画像として表示するのを見ることができなかったので、...

積極的な画像の削除を避けたい場合は、画像を<canvas>要素に貼り付けて表示することをお勧めします。

<canvas> actualには、toDataURL()必要なデータを提供する組み込み関数が付属していますが、画像の削除を回避する場合は、それは必要ありません。

于 2012-04-24T14:12:34.343 に答える