Installing Uint8ClampedArray in ImageData is very slow in Firefox

Question

I run the following code:

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

This code is fast in Chrome, but very slow in Firefox. Is there a faster way to write Uint8ClampedArray in ImageData?

Answer 1

The fastest way to write Uint8ClampedArray to imageData is to write Uint8ClampedArray, which was not first received by getImageData. context.getImageData is ridiculously slow. I did a jsPerf test that demonstrates where the time goes in the code you posted. The first test writes the existing array to imageData, and the second test reads from the existing imageData. The second test takes more than 99% of the time.

So what can you do about it?

Instead of creating your Uint8ClampedArray from context.getImageData, try creating it using new Uint8ClampedArray(width*height*channels) . Alternatively, if you want to write multiple times to imageData, but you can avoid reading only from it once, cache Uint8ClampedArray and do not recreate it from what imageData returns.

I ran into this problem myself, a few weeks ago. I actually ended up redoing a bit of the program to avoid reading out of context. Despite the fact that getImageData is much faster in Chrome, it still had a slight effect on the frame rate of the browser when I tried to run it every frame. I ran the project in Dropbox and JS has no obstacles, so you can just check it if you want to know what someone else has done with this problem.

Hope this helps!