html5 canvas 遮罩,GitHub - benbarnett/canvas-mask: Use HTML5 Canvas to apply an alpha mask to an image...

Canvas Mask Utility

Use HTML5 Canvas to apply an alpha mask to an image element.

Compatible with any browser supporting Canvas.

Tested with Chrome 11 and Firefox 3.6+

Demo

What it does

The function will use HTML5 Canvas to read alpha data from a PNG-24, and apply this to any image element. I have often used this technique to take advantage of the smaller file sizes with JPEG, and then a 2 colour PNG-24 to apply the transparency.

Example images:

Usage

Simply pass in two image elements (pre-loaded, as shown on demo), the width and the height and you're done.

By default the function will return Canvas pixel data which you can then use to draw on to a Canvas. For example:

output.putImageData(

applyCanvasMask(, , width, height), 0, 0, 0, 0, width, height

);

Alternatively, you can specify a 5th parameter to have the function return the masked image as a Base64 encoded data URL. This is useful for applying to background images. For example:

$('body').css({

'background-image': 'url(' + applyCanvasMask(, , width, height, true) + ')'

});

Changelog

0.2 (10/01/2013):

Merge pull request #3 - allow two transparent pngs to mask

0.1 (02/06/2011):

Initial release.

Credits

Author: Ben Barnett - http://www.benbarnett.net - @benpbarnett

Jake Archibald for originally demonstrating this type of pixel manipulation - http://jakearchibald.com/scratch/alphavid/ - @jaffathecake