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. 🙂
Comments
We moved off of Disqus for data privacy and consent concerns, and are currently searching for a new commenting tool.
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.
the fourth value of the above array should be less then one is it?, because it tells the alpha (transparency) of that particular pixel.
I want to process application \”face detection\” with ccv library on webworker, can you help me???