在Firefox中将Uint8ClampedArray设置为ImageData非常慢

Question

我正在运行以下代码：

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

imagedata.data.set(pixelArray);

此代码在Chrome中运行速度很快，但在Firefox中速度很慢。 有没有更快的方法将Uint8ClampedArray写入ImageData？

Answer 1

将Uint8ClampedArray写入imageData的最快方法是编写一个首先不是由getImageData获取的Uint8ClampedArray。 context.getImageData非常慢。我制作了一个test on jsPerf来说明您发布的代码的时间。第一个测试将现有数组写入imageData，而第二个测试从现有imageData读取。第二次测试占用了99％以上的时间。

那么，你能做些什么呢？

不是从context.getImageData创建Uint8ClampedArray，而是尝试通过new Uint8ClampedArray(width*height)创建它。或者，如果您希望多次写入imageData，但只能从中读取一次，请缓存Uint8ClampedArray，不要从imageData返回的内容中重新创建它。

几周前，我自己遇到了这个问题。我实际上最终重做了一些程序，以避免从上下文中读取。即使getImageData在Chrome中速度要快得多，但是当我尝试每帧运行时，它对浏览器的帧速率仍有很小的影响。我已经在dropbox上完成了项目，并且JS没有经过模糊处理，所以如果你想看看别人对这个问题做了什么，你可以检查它。

希望有所帮助！