Question

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

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

Window 7/8 / 8.1 - chrome / opera / ie / mozilla：约250k次操作/秒

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/

提供的主要内容是：

- 缓存canvas.width和canvas.height以避免DOM访问，只需创建一个您继续修改的imageData（释放g.c。）。

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

Answer 1

我强烈建议您将此类作品（例如图像和/或其他强烈数据处理）发送给您赢得的网络工作者，并阻止您的调用堆栈和应用程序的响应能力。

Web Workers on HTML5 Rocks帮助我弄清楚如何使用网页工作者进行图像转换，而不会让你的绘画应用程序卡住。

您还可以查看 Web Worker Documentation on MDN如果你进入那个。

HTML5 canvas在Mac OS上慢速本机函数getImageData（）

1 个答案: