0

私が取り組んでいるキャンバス ペイント アプリは、マウス クリックを使用して描画します。十分に単純です。getImageData に対して現在の描画を保存し、ユーザーが実際に描画したセッション cookie を設定するリスナーが mouseup にあります。スニペット:

var canvasData;
function save () {
  // get the data
  canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
};

...

this.mouseup = function (ev) {
 if (tool.started) {
  tool.mousemove(ev);
  tool.started = false;
  save();
  document.cookie = 'redraw=true; path=/'
 }
};

私が探している機能は、ユーザーがページを離れてキャッシュなしでページに戻り、サイトに Cookie を表示させ、図面を読み取り、putImageData を使用してマッピングできるようにすることです。スニペット:

function restore () {
  // restore the old canvas
  context.putImageData(canvasData, 0, 0);
};

var checking = readCookie('redraw')
if (checking) {
  restore();
};

しかし、それを実行しようとすると、putImageData 行に「画像が破損しているか切り捨てられています」および「TypeError: 値がオブジェクトではありません」というエラー コンソールが表示されます。

キャンバスをメモリに保存しようとしたとき（データに保存、画像を描画）：

var savedData = new Image();
function save () {
savedData.src = canvas.toDataURL("image/png");
};
function restore () {
context.drawImage(savedData,0,0);
};

「NS_ERROR_NOT_AVAILABLE: コンポーネントが利用できません」と「プロパティ 'toString' にアクセスする権限が拒否されました」というメッセージが表示されました。私が間違っていることを知っている人はいますか？私はそれをjsfiddleに置きますが、この場合はあまり機能しないので、完全な. ありがとう。

4

1 に答える 1

0

Cookie はサイズが制限されすぎているため、データを保存するとデータが切り捨てられ、約 4 kb の制限を超えます。これは、base64 でエンコードされた画像 (データ URL) に関してはそれほど多くありません。

最新のクライアント (ブラウザー) は、より新しい保存方法をサポートしています。主要なブラウザーでは、次のストレージ メカニズムを使用できます (どのブラウザーが何をサポートしているかについては、各セクションの下のリンクを参照してください)。

ローカルストレージ

キーと値のペアとしてデータを格納します。画像をデータ URL として保存するか、より便利な場合はデータを保持する配列を保存できます。

このインターフェースは同期的です。

（localSession一時保管用のものもあります）。

クライアントサポート:
http://caniuse.com/#search=localstorage

説明している使用法については、このインターフェイスがおそらく最も単純です (頻繁に保存する場合は、おそらく非同期インターフェイスを好むでしょう)。例:

localStorage[myKey] = 'myData';
var myData = localStorage[myKey];

索引付けされたDB

もう少し複雑ですが、データをBlobオブジェクトとして保存できます。

このインターフェイスは非同期です。

クライアントサポート:
http://caniuse.com/#search=indexeddb

例:
http://www.html5rocks.com/en/tutorials/indexeddb/todo/

ファイル API

現在、Chrome でのみサポートされています。ディレクトリなどを備えたファイルシステムとして機能します。ここでは、すべてをブロブとして保存します

このインターフェイスは非同期です。

クライアントサポート:
http://caniuse.com/#search=filesystem

例:
http://www.html5rocks.com/en/tutorials/file/dndfiles/

ウェブ SQL

公式には非推奨ですが、Safari や IIRC Opera などのブラウザーでまだ使用されています (しばらくの間使用される予定です)。Chrome もサポートしていますが、Firefox と IE はサポートしていません。

このインターフェイスは非同期です。

クライアントサポート:
http://caniuse.com/#search=websql

例:
http://html5doctor.com/introducing-web-sql-databases/

ユーザーデータ

userData は古い IE バージョンでサポートされています。この API は、複数の意味でいくらか制限されています。

クッキー

Cookie はリクエストごとにサーバーに送信されるため、Cookie が大きいほど通信が遅くなります。それらは 4 kb に制限されています。

クライアントは、これらのインターフェイスの一部について、コンピューターにデータを保存するためのユーザー許可を求める場合と求めない場合があることに注意してください。通常は、5 MB を超えるサイズ (Web SQL、indexedDB) を要求する場合です。ただし、これはクライアント次第です。これは一部のユーザーにとっては煩わしいと思われる可能性があるため、アプリが最初にこれを要求することをユーザーに警告することをお勧めします。

于 2013-05-19T05:47:27.327 に答える