Image compression inside HTML5 Web Worker

Question

I have a web application which create a big image (30Mo) as a bufferArray inside a web worker. I would like to return this image to the main thread.

Return the bufferArray via the postMessage method is very slow (5 secondes) and it freeze the UI.

postMessage(data);

So, I have looking for a library to compress the image but I'm only find library which use HTML5 canvas. Because HTML5 canvas is forbidden is Web Worker, I'm asking if you have solution to this problem ?

My goal is to take more time in the Web Worker and reduce the transfer time.

Answer 1

Some browsers support transferable objects but to my knowledge not all of them.

Transferable objects are basically pointers to structures that you pass from main thread to worker and/or back. Using this methodology requires sightly different invocation of postMessage()

More of this is covered here

Answer 2

How about to increase the concurrent web workers threads pool?

Here is two great articles which cast some lights on how to use it:

http://www.smartjava.org/content/html5-easily-parallelize-jobs-using-web-workers-and-threadpool

http://typedarray.org/concurrency-in-javascript/

Answer 3

Here's how use the postMessage method :

postMessage(jsonObject, [jsonObject.data.buffer]);

The first argument is the same as usual. The second must be an array of ArrayBuffer.

Still looking for image compression library with no use of HTML5 canvas.