One of the questions that came up in the Processing track was: “Can you pass the image data from a Canvas to a Web-Worker for processing?” My assumption was “yes” as the specs declare you can paste any complex object to and from workers so long as you’re not trying to pass a DOM element.
But then again… you never know what you can and cant do with all these security folk lurking around on browser development teams — making life difficult for the unclean web developer massive. So I went about creating a quick demo to prove, or disprove the point.
// The script inside my HTML document... // Create a new Worker thread var myPixelWorker = new Worker( 'pixelWorker.js' ); // When the Worker posts a message back to the Window myPixelWorker.onmessage = function( event ){ // Log the message that was passed back console.log( event.data ); }; // When the Document has loaded... addEventListener( 'DOMContentLoaded', function(){ // Get the Canvas and Context var canvas = document.getElementById( 'myCanvas' ); var context = canvas.getContext( '2d' ); // Paint the Canvas green context.fillStyle = "rgb(0,255,0);" context.fillRect( 0, 0, 10, 10 ); // Get 100 pixels of the green Canvas var data = context.getImageData( 0, 0, 10, 10 ).data; // Post the 100 pixel array to the Worker thread myPixelWorker.postMessage( data ); }, false );
The script creates a Worker thread from the file “pixelWorker.js” and then adds an onmessage handler for logging what was passed between the Window and the Thread. The when the document has loaded, the JavaScript paints the canvas green, grabs the pixel data from the canvas, and passes the data to the worker.
// The script inside my Worker thread onmessage = function( event ){ postMessage( event.data ); }
The worker then takes the incoming message and fires it straight back to the Window where the result is logged in the Firebug console. Here are the results:
[0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 100 more...]
BINGO! Kind of obvious, but it needed to be blogged somewhere… that passing Canvas pixels to a Worker thread, definitely does work. 
5 Comments
This is excellent news. As for your choice of event attribute assignment, we’ll discuss that tomorrow at the Loft.
Nice one! so much potential and promise with HTML5.
Hahah, I *knew* you’d pick up on that!
Nice write-up. I used a web worker thread to process image data and generate a histogram in this demo.
While developing this, I discovered that you cannot pass using postMessage() the ImageData object returned by context.getImageData(), as that is considered a DOM element. As your example shows, you must post the members of the ImageData object.
@Joe Turgeon, good point, I forgot to mention that. Very nice demo too btw!
@eepmon, yeah totally agree, HTML5 is changing the way we work and play.
One Trackback
[...] This post was mentioned on Twitter by Alistair MacDonald, Bocoup, LLC. Bocoup, LLC said: Processing Canvas pixel data in a Worker thread definitely does work: http://weblog.bocoup.com/processing-pixel-data-with-web-workers [...]