Processing Pixel Data with Web Workers…

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. 🙂