我正在运行以下代码：
ImageData imagedata = context.getImageData(0, 0, width, height);
Uint8ClampedArray pixelArray;
...
imagedata.data.set(pixelArray);
该代码在 Chrome 中运行速度很快，但在 Firefox 中运行速度很慢。有没有更快的方法将 Uint8ClampedArray 写入 ImageData？
问问题
4199 次
1 回答
7
将 Uint8ClampedArray 写入 imageData 的最快方法是写入不是首先由 getImageData 获得的 Uint8ClampedArray。context.getImageData 慢得离谱。我已经对 jsPerf 进行了测试，它演示了您发布的代码中时间的去向。第一个测试将现有数组写入 imageData，而第二个测试从现有 imageData 读取。第二个测试占用了超过 99% 的时间。
所以你能对它做点啥？
不要从 context.getImageData 创建 Uint8ClampedArray，而是尝试通过 .getImageData 创建它new Uint8ClampedArray(width*height*channels)。或者，如果您希望多次写入 imageData，但您可以只读取一次，缓存 Uint8ClampedArray 并且不要从 imageData 返回的任何内容中重新创建它。
几周前，我自己也遇到了这个问题。实际上，我最终重做了一些程序，以避免从上下文中读取。尽管 getImageData 在 Chrome 中要快得多，但当我尝试每帧运行它时，它对浏览器的帧速率仍然有很小的影响。我已经在dropbox上完成了这个项目，并且 JS 没有被混淆，所以如果你想看看其他人对这个问题做了什么，你可以检查它。
希望有帮助！
于 2013-04-22T07:27:17.723 回答