設置Uint8ClampedArray到的ImageData是在Firefox

很慢我運行下面的代碼：設置Uint8ClampedArray到的ImageData是在Firefox

ImageData imagedata = context.getImageData(0, 0, width, height); 
Uint8ClampedArray pixelArray; 
... 

imagedata.data.set(pixelArray);

此代碼跑得快Chrome瀏覽器，但在Firefox很慢。有沒有更快的方式將Uint8ClampedArray寫入ImageData？

來源

2012-11-14 Erik Sapir

因爲您沒有使用偏移量參數，您是否嘗試將pixelArray直接分配給imagedata.data？ imagedata.data = pixelArray; ..不知道這是否有任何不同的性能明智 – lostsource

將一個Uint8ClampedArray寫入imageData的最快方法是編寫一個Uint8ClampedArray，它並非首先通過getImageData獲取。 context.getImageData速度很慢。我製作了一個test on jsPerf，它演示了您發佈代碼的時間。第一個測試將現有數組寫入imageData，而第二個測試從現有的imageData中讀取。第二次測試佔用了99％以上的時間。

那麼，你能做些什麼呢？

而不是從context.getImageData創建您的Uint8ClampedArray，嘗試通過new Uint8ClampedArray(width*height)創建它。或者，如果您希望多次寫入imageData，但您只能從中讀取一次，請緩存Uint8ClampedArray，並且不要從imageData返回的任何內容重新創建它。

幾個星期前，我自己碰到了這個問題。我實際上最終重做了一些程序，以避免從上下文中讀取。即使getImageData在Chrome中速度更快，但當我試圖在每一幀中運行它時，它仍然對瀏覽器的幀率有小的影響。我已經在dropbox上得到了該項目，並且JS未被混淆，因此如果您想查看其他人在解決問題方面所做的工作，則可以對其進行檢查。

希望幫助！

來源

2013-04-22 07:27:17 DDR

不要你的測試完成不同的事情嗎？一個從畫布上讀取現有圖像，另一個創建一個新的「圖像」。 – notJim

設置Uint8ClampedArray到的ImageData是在Firefox

回答

相關問題