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.).
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:
So, basically all the Photoshop modes sans "dissolve" and the HSL based ones (which I guess I'll add at some point as well).
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
So, basically all the Photoshop modes sans "dissolve" and the HSL based ones (which I guess I'll add at some point as well).
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 SeidelinThe nightly builds work just fine. Still waiting for Safari and Chrome to get up to speed, though.
January 22, 2009 at 1:42 PM UnknownI 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.
January 23, 2009 at 8:46 AM AnonymousThen 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?
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.
January 31, 2009 at 7:51 AM mathiasI hope to some day have tools like that in next version of the photo editor, though.
How should I declare this in jquery ?
April 1, 2009 at 7:57 AM stinki1. 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";
hi, is it possible to blend images with the background? thanks
December 2, 2011 at 3:23 PM