HTML5 canvas Mac OS 上的本机函数 getImageData() 速度较慢

Question

我在 Mac OS 上使用一个本机 HTML5 canvas 函数 getImageData() 有问题。我运行在 jsperf 中使用类似功率的处理器测试此功能，结果是：

Ubuntu 14.04 - chrome/opera: 300k operations/sec

Window 7/8/8.1 - chrome/opera/ie/mozilla：大约 250k operations/sec

Mac OS - safari/chrome/opera：大约 1k operations/sec

使用 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

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

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

您还可以查看 Web Worker Documentation on MDN 如果你喜欢的话。

HTML5 canvas Mac OS 上的本机函数 getImageData() 速度较慢

HTML5 canvas slow native function getImageData() on Mac OS

javascript

html

canvas

getimagedata