Photoshop-esque blend mode in web pages using CSS or JavaScript?

Question

I am wondering if it is possible to blend two or more images together on a webpage using blend modes like you will find in photoshop (overlay, screen, lighten, etc).

I know that this kind of thing is possible with flash and java, but is it possible without any plugins i.e. with CSS or JavaScript? I have seen a few javascript examples of this effect that work on relatively small images, but I am interested in performing this on high resolution images... this is purely for experimental purposes.

Answer 1

With the canvas element, you can get overlay and lighten pretty easily. It's all about what settings you specify before rendering each bitmap to the canvas.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

Answer 2

I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

See the README for more information, including the blend modes supported in the current version.