HTML5畫布緩慢的本地函數getImageData（）在Mac OS

Question

我有一個在Mac OS上一個原生HTML5的畫布功能getImageData()問題。我在jsperf具有相似功率處理器和結果運行該功能測試是：

的Ubuntu 14.04 - 鉻/歌劇：300K運算/秒

窗口7/8/8.1 - 鉻/歌劇/ IE/Mozilla瀏覽器：約250K運算/秒

的Mac OS - Safari /鉻/歌劇：約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（釋放gc）。

看起來會是如獲得靜態全畫布圖像數據，並使用它，但我不能用所有的時間靜態帆布數據，因爲我創造這樣的塗料塗覆在繪製每一刻更改畫布背景。 也許有人可以提供任何東西？

Answer 1

我強烈建議發送此類作品（圖像和例如或其他激烈數據操作），以一個網絡工作者，你就不會阻塞調用棧和應用程序的響應能力。

Web Workers on HTML5 Rocks幫助我弄清楚如何使用Web工人圖像變換，而不使您的塗料中的應用被卡住。

你也可以查看 Web Worker Documentation on MDN如果你是這樣的。