Adding Alpha Channel to JPEG with HTML5 canvas


On the W3C blog, a short note about adding alpha channels or chroma keys to JPEG images. A workaround using HTML5 canvas 2D could add this missing feature to JPEG which compress photos much better than PNG and GIF.

The chroma-key.js library automatically applies alpha channels or chroma keys for all images with the associated attributes. The class and id attributes are copied to the generated canvas elements, so if you load the library before your script that adds event handlers all will be well, likewise for style rules that match the id or class values, but note that the img element will have been replaced by a canvas element. To support accessibility, the image’s alt attribute is copied to the content of the canvas element. The data- prefix is used for the new attributes as per the HTML5 specification support for custom attributes.