Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
Chapter 4. Images and Video > 4.6. Clipping Images
4.6. Clipping Images
The application shown in Figure 4.17 takes the application shown in Figure 4.16 to its logical conclusion.
Figure 4.17. Sunglasses
The sunglasses application, which is listed in Example 4.18, uses web workers, image manipulation, an offscreen canvas, clipping, and the Canvas drawing APIs. At a high level, here’s how it works:
var sunglassFilter = new Worker('sunglassFilter.js');
...
imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
sunglassFilter.postMessage(imagedata);
sunglassFilter.onmessage = function(event) {
offscreenContext.putImageData(event.data, 0, 0);
drawLenses(leftLensLocation, rightLensLocation);
drawWire(center);
drawConnectors(center);
};
...
The application gets the image data from the canvas and subsequently posts it to the sunglass web worker listed in Example 4.17.
