0

だから私は画像をグレースケールに変換する関数を持っています。元の画像のURLと、出力を配置するための出力キャンバスを取り込みます。この機能はほとんどのブラウザで非常に高速に実行されますが、モバイルブラウザでは非常に低速です（700x700の画像の場合は約3〜4秒）。このため、（クライアントで）グレースケール画像データをキャッシュしたいのですが、画像のリクエストが複数回発生した場合は、キャッシュされたグレースケールデータを提供し、再計算する必要はありません。

jsfiddleでテストを作成しました。http://jsfiddle.net/RCkDX/4/ テストページの上部に元の画像を表示し、下部に計算に使用するキャンバスを出力し、2つのキャンバスを出力します。真ん中は、下の画像と同じように出力する必要があります（キャッシュされたデータを除く）。

現時点では、「Uncaught TypeError：Type error」が発生します。キャッシュデータが気に入らないため、さまざまな方法を試してみましたが、うまくいきませんでした。

使用しているAndroidモバイルブラウザは現時点で小さな青い疑問符アイコンを表示するため（キャンバス上の正しいデータではない）、キャッシュにdataurlsを使用しないことが重要です。そのため、dataurlsがないオプションはすべて機能します。

4

1 に答える 1

1

@jezternz、'Uncaught TypeError: Type error'あなたのコードでは、readyCanvas関数がreturnFunc毎回呼び出されるために発生すると思います（違いはありません：キャッシュが存在するかどうか）。readyCanvas また、 grayscaleCache [src]内では、キャッシュがない場合、undefinedを返す可能性があります。私のコード例（jsfiddle.net/RCkDX/5）では、grayscaleCache [src]が定義されている（キャッシュが構築されて保存されている）場合にのみreadyCanvas呼び出されます。私のコードから削除されました。主な理由：例を単純化するため。returnFuncsetTimeout

ブロックページなし（UIのフリーズなし）でコードをビルドする必要がある場合は、キャッシュを管理するためのより複雑なコードを提供する必要があります。例えば：

  • grayscaleCache [src]は未定義です。これは、 「キャッシュがなく、以前のリクエストによってキャッシュが構築されていない」ことを意味します。キャッシュ手順を開始する必要があります。
  • grayscaleCache [src]はnullに等しく、「キャッシュは前のリクエストで作成中です」を意味します。キャッシュ手順を開始する必要はありません。キャッシュの準備ができたら待機するだけです（ setTimeoutで確認）。
  • grayscaleCache [src]は未定義ではなく、nullでもありません- 「キャッシュの準備ができています」 -キャッシュを使用します。
于 2012-05-30T09:48:02.163 に答える