Hack 67. Process Image Data with Pixel Manipulation in a Dedicated Worker

One of the most practical uses of web workers involves processing image data client-side without having to pass data back and forth from a remote server. Pixel manipulation is a common way to add filter-like effects to images. Since you have access to events exposed by the native browser API, you can apply these events based on user input.

In this hack we will apply a grayscale filter to an image of the HTML5 logo. We will apply the filter’s configuration based on location data and initiated on a native browser event. The location data we will use will come from the x coordinate of the mouse’s cursor, and the event we will use will be the mouseover event. As we mouse over the HTML5 logo from left to right, the number will be smaller than if we were mousing over the image from right to left. On this event, we will then pass the data to the web worker for image processing. The filter we will create and apply will simply remove all color except for black and white (in essence, it will be a grayscale filter).