Documentation: Blend

Description

This action lets you blend two images using different blend modes like the ones available in Photoshop (multiply, screen, exclusion, difference, etc.). 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.

Demo

Amount:
Mode:


Blend image:

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";
}
img.src = "myimage.jpg";

Parameters

  • amount (float)
    Amount of the image to blend. Value between 0 and 1.
  • mode (string)
    The blend mode. One of "normal", "multiply", "lighten", "darken", "lightercolor", "darkercolor", "difference", "screen", "exclusion", "overlay", "softlight", "hardlight", "colordodge", "colorburn", "lineardodge", "linearburn", "linearlight", "vividlight", "pinlight", "hardmix".
  • image (image)
    Image element to blend with original image.

View source: blend.js

Browser support