のImageDataにUint8ClampedArrayを設定すると、私は次のコードを実行しているFirefoxの

Question

に非常に遅いです：

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

imagedata.data.set(pixelArray); 

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

Answer 1

画像データにUint8ClampedArrayを書き込むための最速の方法は、最初getImageDataにより得られなかったUint8ClampedArrayを書くことです。 context.getImageDataは非常に遅いです。私はtest on jsPerfを作成しました。このコードは、あなたが投稿したコードのどこに時刻が入っているかを示しています。最初のテストは既存の配列をimageDataに書き込み、2回目のテストは既存のimageDataから読み取ります。 2回目のテストは99％以上を占めます。

だから、どうすればいいですか？

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

私は数週間前に、この問題全体に自分自身を実行しました。私は実際に文脈から読むことを避けるために少しのプログラムをやり直すことになった。 getImageDataはChromeではるかに高速ですが、フレームごとに実行すると、ブラウザのフレームレートにはまだ小さな影響がありました。私はdropboxのプロジェクトを手に入れました.JSは難解ですので、他の誰かがこの問題で何をしたのかを見たい場合には、それを調べることができます。

希望に役立ちます！