8

次のコードを実行しています。

ImageData imagedata = context.getImageData(0, 0, width, height);
Uint8ClampedArray pixelArray;
...

imagedata.data.set(pixelArray);

このコードは Chrome では高速に実行されますが、Firefox では非常に遅くなります。Uint8ClampedArray を ImageData に書き込むより高速な方法はありますか?

4

1 に答える 1

7

Uint8ClampedArray を imageData に書き込む最も速い方法は、最初に getImageData によって取得されたのではない Uint8ClampedArray を書き込むことです。context.getImageData はとてつもなく遅いです。あなたが投稿したコードのどこに時間がかかっているかを示すjsPerfでテストを行いました。最初のテストは既存の配列を imageData に書き込み、2 番目のテストは既存の imageData から読み取ります。2 番目のテストは 99% 以上の時間を占めます。

それで、あなたはそれについて何ができますか？

context.getImageData から Uint8ClampedArray を作成する代わりに、 経由で作成してみてくださいnew Uint8ClampedArray(width*height*channels)。別の方法として、imageData に何度も書き込みたいが、一度だけ読み取れば済む場合は、Uint8ClampedArray をキャッシュし、imageData が返すものから再作成しないでください。

数週間前、私はこの問題に遭遇しました。実際には、コンテキストから読み取らないようにするために、プログラムを少しやり直しました。getImageData は Chrome ではるかに高速ですが、すべてのフレームで実行しようとすると、ブラウザーのフレームレートにわずかな影響がありました。プロジェクトを dropbox にアップしました。JSは難読化されていないため、他の誰かが問題に対して何をしたかを確認したい場合は、JS を調べるだけで済みます。

それが役立つことを願っています!

于 2013-04-22T07:27:17.723 に答える