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

Comments

We moved off of Disqus for data privacy and consent concerns, and are currently searching for a new commenting tool.

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

  2. the fourth value of the above array should be less then one is it?, because it tells the alpha (transparency) of that particular pixel.

Contact Us

We'd love to hear from you. Get in touch!

Mail

P.O. Box 961436
Boston, MA 02196