在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非常慢.我已经对jsPerf进行了测试,该测试演示了您发布的代码中的时间.第一个测试将现有数组写入imageData,而第二个测试从现有imageData读取.第二次测试占用了99%以上的时间.

所以你能对它做点啥？

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

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

希望有所帮助!