20

キャンバスを使用して非常に大きな画像を描画するフェイルセーフ プログラムを作成しようとしています (おそらく 60 MB が上限で、10 MB が下限です)。toDataURLキャンバスの同期関数を呼び出すと、通常、ブラウザーでページがクラッシュすることをずっと前に発見したのでtoBlob、クロスブラウザーの互換性のために、フィラーを使用してメソッドを使用するようにプログラムを調整しました。URL.createObjectURL(blob)私の質問は次のとおりです:メソッドを使用した Blob URL はどのくらい持続しますか?

ある時点で画像の一部をレンダリングし、ブラウザを閉じて、戻ってきて後で終了したい場合に備えて、Blob URL をキャッシュして、ブラウザ セッションを超えて存続できるようにする方法があるかどうかを知りたいです。 Blob URL を再度キャンバスに読み取り、中断した時点から再開します。このオプションの autoRevoke 引数が探しているものである可能性があることに気付きましたが、実行しようとしていることが実際に可能であることを確認したいと思います。別の解決策が含まれない限り、回答にコード例は必要ありません。必要なのは、このメソッドまたはその他の方法を使用してセッションを超えてBlob URLを持続させることができるかどうかについて、はいまたはいいえです。(これは、何らかの理由でページがクラッシュし、「セッションの復元」オプションのように機能する場合にも便利です。)

私は次のようなことを考えていました：

function saveCache() {
  var canvas = $("#canvas")[0];
  canvas.toBlob(function (blob) {
    /*if I understand correctly, this prevents it from unloading
      automatically after one asynchronous callback*/
    var blobURL = URL.createObjectURL(blob, {autoRevoke: false});
    localStorage.setItem("cache", blobURL);
  });
}

//assume that this might be a new browser session

function loadCache() {
  var url = localStorage.getItem("cache");
  if(typeof url=="string") {
    var img = new Image();
    img.onload = function () {
      $("#canvas")[0].getContext("2d").drawImage(img, 0, 0);
      //clear cache since it takes up a LOT unused of memory
      URL.revokeObjectURL(url);
      //remove reference to deleted cache
      localStorage.removeItem("cache");
      init(true); //cache successfully loaded, resume where it left off
    };
    img.onprogress = function (e) {
      //update progress bar
    };
    img.onerror = loadFailed; //notify user of failure
    img.src = url;
  } else {
    init(false); //nothing was cached, so start normally
  }
}

これが意図したとおりに機能するかどうかは確信が持てないことに注意してください。

編集は、それが:PsessionStorageと同じではないことに気付きましたlocalStorage

4

1 に答える 1

20

Blob URL はセッション間で存続できますか? あなたが望む方法ではありません。

URL は文字列として表される参照であり、任意の文字列と同様に localStorage に保存できます。URL が指す場所は本当に必要なものであり、セッション間で保持されません。

引数と組み合わせて URL.toObjectUrl() を使用するautoRevokeと、URL は、呼び出すrevokeObjectUrlまで、または「ドキュメントのアンロード クリーンアップ手順が実行されるまで」保持されます。(手順の概要: http://www.w3.org/TR/html51/browsers.html#unloading-document-cleanup-steps )

私の推測では、ブラウザー セッションの有効期限が切れたときにこれらの手順が実行されているため、blobURL後続のセッションでターゲットにアクセスできません。

これに関する他の談話:将来の使用のために window.URL.createObjectURL() の結果を保存する方法は?

上記は、FileSystem API を使用して canvas 要素の blob 表現を保存することを推奨するものです。初めてファイル システムをリクエストするときは、PERSISTENT ストレージをリクエストする必要があり、ユーザーはマシンにデータを永続的に保存することに同意する必要があります。

http://www.html5rocks.com/en/tutorials/file/filesystem/には、必要なすべての優れた入門書があります。

于 2012-12-21T01:39:22.860 に答える