我正在运行以下代码:
ImageData imagedata = context.getImageData(0, 0, width, height);
Uint8ClampedArray pixelArray;
...
imagedata.data.set(pixelArray);
此代码在 Chrome 中运行速度很快，但在 Firefox 中运行速度非常慢。 有没有更快的方法将 Uint8ClampedArray 写入 ImageData？
最佳答案
将 Uint8ClampedArray 写入 imageData 的最快方法是写入不是首先通过 getImageData 获取的 Uint8ClampedArray。 context.getImageData 慢得离谱。我做了一个 test on jsPerf它演示了您发布的代码中时间的去向。第一个测试将现有数组写入 imageData，而第二个测试从现有 imageData 读取。第二个测试占用了 99% 以上的时间。
那么，你能做些什么呢？
不要从 context.getImageData 创建 Uint8ClampedArray，而是尝试通过 new Uint8ClampedArray(width*height*channels) 创建它。或者，如果您希望多次写入 imageData，但只读取一次即可，请缓存 Uint8ClampedArray 并且不要从 imageData 返回的任何内容中重新创建它。
几周前，我自己遇到了这个问题。实际上，我最终重做了一些程序以避免从上下文中读取。尽管 getImageData 在 Chrome 中要快得多，但当我尝试在每一帧运行它时，它对浏览器的帧率仍然有很小的影响。我已经在 dropbox 上启动了项目，并且 JS 是未混淆的，因此如果您想查看其他人如何处理该问题，您可以直接检查它。
希望对您有所帮助!
关于javascript - 将 Uint8ClampedArray 设置为 ImageData 在 Firefox 中非常慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13385335/