BlendMode jQuery Plugin

This plugin will process a given HTML5 canvas or image element using one of the offered Blend-Modes by the Blend-Layer parameter.
The parameter can be a String specifying a solid color or HTML image and canvas element. The mode determines how the two defined layers will blend into each other. The result is saved, so running the script twice will reprocess the first result. Two simple examples are part of the downloadable zip file.

Demo Interface (Additive)

Once a Blend-Mode has been selected from the drop down-menu, the image data will be processed accordingly. By selecting another Blend-Mode the proccess will be repeated additively. Use the Revert-button to start over.

blendmode default sourceimage

blendmode default blendimage


jQuery Pluginjquery.blendmode.js Zip Package incl. Examples
199,9 kB (199.894 Bytes)

md5 40a4489a306da78e8f10b2e44bb5a390

jquery.blendmode.js Script
23,5 kB (23.502 Bytes)

md5 ecc9232ddfbc582dfc711b464c1d32f2

Basic Usage

	"mode" : "pinlight",
	"object" : "#FF0000"
<img id="sourceImage" src="sourceImage.png" alt="The source image for blending"/>


• mode (string)
The Blend-Mode may be one of "normal", "multiply", "lighten", "darken", "lineardodge", "linearburn", "linearlight", "vividlight", "pinlight", "hardmix", "lightercolor", "darkercolor", "difference", "screen", "exclusion", "overlay", "softlight", "hardlight", "colordodge", "colorburn".

• object (image)
This may either be an HTML5 canvas or image node.

• scaletofit (bool)
Scales the Blend-Layer to the size of the sourceImage. The value may be true or false.

Browser Support

Chrome BrowserChrome Opera BrowserOpera Firefox BrowserFirefox Safari BrowserSafari

SourcecodeView Sourcecode