Check out my
new book!
HTML5 Games book
Photoshop blend modes with Pixastic I've added a new action to the Pixastic library called "blend". This action lets you blend two images using different blend modes like the ones available in Photoshop (multiply, screen, exclusion, etc.).

Example usage

var img = new Image();
img.onload = function() {
 var blendImg = new Image();
 blendImg.onload = function() {
  Pixastic.process(img, "blend", 
   {
    amount : 1, 
    mode : "multiply", 
    image : blendImg
   }
  );
 }
 blendImg.src = "blendimage.jpg";
}
document.body.appendChild(img)
img.src = "myimage.jpg";
The image on which you apply the action will be considered the base image when blending. You can use either an img element or a canvas element for the "blend image". It expects the images to be the same size but will simply crop the blend image if it's too large or leave untouched areas if it's smaller then the base image.

Check the demo page to see it in action.

Below are shown all the blend modes included. The images used are:
Base image:

Blend image:

Blend modes

Normal
Darken
Multiply
Color Burn
Linear Burn
Darker Color
Lighten
Screen
Color Dodge
Linear Dodge
Lighter Color
Overlay
Soft Light
Hard Light
Vivid Light
Linear Light
Pin Light
Hard Mix
Difference
Exclusion


So, basically all the Photoshop modes sans "dissolve" and the HSL based ones (which I guess I'll add at some point as well).

⇓ 7 comments Drakim

Uhm, I can't remember, but did you solve the problem with Webkit not having the needed support inside canvas? It was lacking some functions if I remember correctly, and it really ruined some things for me. D:

January 22, 2009 at 1:36 PM
Jacob Seidelin

The nightly builds work just fine. Still waiting for Safari and Chrome to get up to speed, though.

January 22, 2009 at 1:42 PM
Drakim

I see. But if I remember right, both Safari and Chrome auto updates their browser without asking the user. As much as I hate that, it does seem like an advantage to us web developers. It's nice to know that one day, my application will suddenly work for all Webkit browser users all at once.

Then there is the issue of IE, which saves itself with tons of strange filters which everybody rightfully hates but needs. What has the world gone to really?

January 23, 2009 at 8:46 AM
Medyk

It would be great to have clone or healing like functionality known from Photoshop. However I'm not sure is it technically possible with Canvas. It's also different approach we're not processing whole image.. but we're changing small area of image on click.

January 30, 2009 at 2:00 AM
Jacob Seidelin

@Medyk: Something like that is definitely possible, but I'm not sure it fits in the context of this library, since this is more about doing one-shot actions on (sections of) images. Besides, the Pixastic library has no UI functionality whatsoever.

I hope to some day have tools like that in next version of the photo editor, though.

January 31, 2009 at 7:51 AM
mathias

How should I declare this in jquery ?
1. var img = new Image();
2. img.onload = function() {
3. var blendImg = new Image();
4. blendImg.onload = function() {
5. Pixastic.process(img, "blend",
6. {
7. amount : 1,
8. mode : "multiply",
9. image : blendImg
10. }
11. );
12. }
13. blendImg.src = "blendimage.jpg";
14. }
15. document.body.appendChild(img)
16. img.src = "myimage.jpg";

April 1, 2009 at 7:57 AM
stinki

hi, is it possible to blend images with the background? thanks

December 2, 2011 at 3:23 PM
Post a Comment