8

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.

Greg
  • 21,235
  • 17
  • 84
  • 107

2 Answers2

6

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

groovecoder
  • 1,551
  • 1
  • 17
  • 27
Eric Mickelsen
  • 10,309
  • 2
  • 30
  • 41
5

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.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • What's the efficiency like on this library? – Greg Dec 20 '10 at 09:41
  • @Greg I get ~210fps on a straight copy of a 141x141 region, and ~160fps performing "difference" mode (the current worse performer), using Safari v5. Performance on Chrome is better, Firefox is worse. There's only one main optimization that I have (intentionally) not made: right now there is a `switch` inside a `for` looping over the pixels. Exploding the loops inside each `case` instead provides about a 5-10% speed boost, but at an ugly, non-DRY expansion of the code base, duplicating calculations common to all modes. – Phrogz Dec 20 '10 at 14:32
  • @Greg The library is currently a readable [145 lines of code](https://github.com/Phrogz/context-blender/blob/master/context_blender.js) (with about 14 of those being comments that I really need to just delete). – Phrogz Dec 20 '10 at 14:37
  • @Phrogz - First off, thanks for the code base. I'm working with it right now. I noticed the switch statement being inside the loop. Is there any reason it's in there like that other than for ease of coding? – Qix - MONICA WAS MISTREATED Apr 24 '12 at 07:49
  • @Di-0xide See my comment above from Dec 20; it's as it is for convenience and DRYness. If you need absolute speed you can move the loops inside the switch and possibly receive a moderate performance gain. – Phrogz Apr 24 '12 at 12:40
  • @Phrogz - That's what I figured. I'll play with it later on and see if there's any significant performance increase. – Qix - MONICA WAS MISTREATED Apr 28 '12 at 15:00
  • @Phrogz: Thanks for this! I found your example a bit hard to follow for simply wanting to blend two canvases on a page, but I muddled through and eventually got it figured out. Would you be interested in suggestions for improving the documentation? – Scott Cranfill Jun 06 '12 at 14:28
  • @ScottCranfill Absolutely, thank you. You can email me directly at the address found on http://phrogz.net/contact (or https://github.com/phrogz/ if that address does not work). – Phrogz Jun 06 '12 at 15:18