javascript - Mac OS 上的 HTML5 canvas 慢 native 函数 getImageData()

Question

我在 Mac OS 上使用一个原生 HTML5 canvas 函数 getImageData() 时遇到问题。我在 jsperf 中为此功能运行测试具有类似功率的处理器，结果是:

Ubuntu 14.04 - chrome/opera:30 万次操作/秒

Window 7/8/8.1 - chrome/opera/ie/mozilla:大约 25 万次操作/秒

Mac OS - safari/chrome/opera:大约 1k 次操作/秒

使用 getImageData 以获得更好的性能需要使用 x,y 仅作为可变整数值，第二个两个参数以获得更好的性能建议使用 1px

var ctxData=canvasContext.getImageData(x,y,1,1); 
rgba = ctxData.data; 
/* rgba[0] = red channel, rgba[1] = green channel, rgba[2] = blue channel, rgba[3] = alpha channel */

我在论坛上发现讨论如何优化这个功能: http://w3facility.org/question/javascript-canvas-buffer-slow-performance-on-ios-safari-and-chrome/

提供的主要内容:

– cache canvas.width and canvas.height to avoid DOM access, just create ONE imageData that you keep on modifying (relieves the g.c.).

看起来像是获取静态完整 Canvas 图像数据并使用它，但我不能一直使用静态 Canvas 数据，因为我创建的就像一个绘画应用程序，同时绘制每时每刻都在变化的 Canvas 上下文。也许有人可以提供任何东西？

Answer 1

我强烈建议将此类工作(例如图像和/或其他密集数据操作)发送给网络 worker ，这样您就不会阻塞调用堆栈和应用程序的响应能力。

Web Workers on HTML5 Rocks帮助我弄清楚如何使用 Web Worker 进行图像转换而不会使您的绘画应用程序卡住。

您还可以查看 Web Worker Documentation on MDN如果您对此感兴趣。