Blend mode:multiply in Internet Explorer
For Internet Explorer, Canvas blending modes are "under consideration".
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mixblendmode/?q=blend
Until blends are implemented in IE, you can roll-your-own multiply filter:
function multiply(R, G, B) {
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imgData.data;
for (var i = 0; i < data.length; i += 4) {
data[i ] = R * data[i ] / 255;
data[i + 1] = G * data[i + 1] / 255;
data[i + 2] = B * data[i + 2] / 255;
}
ctx.putImageData(imgData, 0, 0);
}
And this multiply image filter is cross-browser compatible too.
How to hack unsupported mix-blend-mode CSS property?
If you don't want to use plain opacity as a fallback:
Approaches to cross-browser support
Javascript polyfill
This will be slow, and will not allow you to easily animate. However, it will let you create an alternate image for each of your matching images, and you can then fade the opacity or do other CSS transition tricks between the two.
http://codepen.io/brav0/pen/bJDxt (not my pen - uses multiply, not soft light)
Server side processing
Wouldn't be my first choice, but if you control the server-side code, you can prepare alternate images using server side imaging libraries (GD, etc)
Only enabling the effect for supporting browsers
Css hacks for detecting IE
@media screen { @media (min-width: 0px) {
div.img::after{ ... }
} }
Using JavaScript
if (window.getComputedStyle(document.body).mixBlendMode !== undefined)
$("div.img").addClass("curtain");
...and the CSS...
img.curtain::after { ... }
HTML5 Canvas blending & IE / Edge
Stackoverflow member and contributor Phrogz has published a very nice library that uses context.getImageData to fetch + blend the pixel data from an image and then uses context.putImageData to apply blending to the image.
His library supports these compositing, coloring & blending modes:
- src-over
- screen
- multiply
- difference
- src-in
- plus
- add
- overlay
- hardlight
- colordodge
- dodge
- colorburn
- burn
- darken
- darker
- lighten
- lighter
- exclusion
- softlight
- luminosity
- color
- hue
- saturation
- lightercolor
- darkercolor
Phrogz's Blending library is available on GitHub:
https://github.com/Phrogz/context-blender
And since it's liberally licensed, below is a copy for Stackoverflow posterity:
Context Blender JavaScript Library
Copyright © 2010 Gavin Kistner
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
(function(){
var defaultOffsets = {
destX : 0,
destY : 0,
sourceX : 0,
sourceY : 0,
width : 'auto',
height : 'auto'
};
if (typeof require==='function' && typeof module==='object'){
var canvas = require('canvas');
addBlendMethod(canvas.Context2d.prototype);
module.exports = canvas;
} else addBlendMethod(this.CanvasRenderingContext2D && this.CanvasRenderingContext2D.prototype);
function addBlendMethod(object){
if (!object || typeof object.getImageData!=='function') return console.error("context blender called without a valid context prototype");
Object.defineProperty(object,'blendOnto',{value:blendOnto});
// For querying of functionality from other libraries
var modes = blendOnto.supportedBlendModes = 'normal src-over screen multiply difference src-in plus add overlay hardlight colordodge dodge colorburn burn darken darker lighten lighter exclusion softlight luminosity color hue saturation lightercolor darkercolor'.split(' ');
var supports = blendOnto.supports = {};
for (var i=modes.length;i--;) supports[modes[i]] = true;
blendOnto.aliases = { "src-over":"normal", plus:"add", dodge:"colordodge", burn:"colorburn", darker:"darken", lighter:"lighten" };
return object;
}
function blendOnto(destContext,blendMode,offsetOptions){
var offsets={};
for (var key in defaultOffsets){
if (defaultOffsets.hasOwnProperty(key)){
offsets[key] = (offsetOptions && offsetOptions[key]) || defaultOffsets[key];
}
}
if (offsets.width =='auto') offsets.width =this.canvas.width;
if (offsets.height=='auto') offsets.height=this.canvas.height;
offsets.width = Math.min(offsets.width, this.canvas.width-offsets.sourceX, destContext.canvas.width-offsets.destX );
offsets.height = Math.min(offsets.height,this.canvas.height-offsets.sourceY,destContext.canvas.height-offsets.destY);
var srcD = this.getImageData(offsets.sourceX,offsets.sourceY,offsets.width,offsets.height);
var dstD = destContext.getImageData(offsets.destX,offsets.destY,offsets.width,offsets.height);
var src = srcD.data;
var dst = dstD.data;
var sA, dA, len=dst.length;
var sRA, sGA, sBA, dRA, dGA, dBA, dA2,
r1,g1,b1, r2,g2,b2;
var demultiply;
function Fsoftlight(a,b) {
/*
http://en.wikipedia.org/wiki/Blend_modes#Soft_Light
2ab+a^2 (1-2b), if b<0.5
2a(1-b) +sqrt(a)(2b-1), otherwise
*/
var b2=b<<1;
if (b<128) return (a*(b2+(a*(255-b2)>>8)))>>8;
else return (a*(511-b2)+(Math.sqrt(a<<8)*(b2-255)))>>8;
}
function Foverlay(a,b) {
return a<128 ?
(a*b)>>7 : // (2*a*b)>>8 :
255 - (( (255 - b) * (255 - a))>>7);
}
function Fdodge(a,b) {
return (b==255 && a==0) ? 255 : Math.min(255,(a<<8)/(255-b));
}
function Fburn(a,b) {
return (b==255 && a==0) ? 0 : 255-Math.min(255,((255-a)<<8)/b);
}
/*
// yyy = similar to YCbCr
0.2990 0.5870 0.1140
-0.1687 -0.3313 0.5000
0.5000 -0.4187 -0.0813
*/
function rgb2YCbCr(r,g,b) {
return {
r: 0.2990*r+0.5870*g+0.1140*b,
g: -0.1687*r-0.3313*g+0.5000*b,
b: 0.5000*r-0.4187*g-0.0813*b };
}
/*
1.0000 -0.0000 1.4020
1.0000 -0.3441 -0.7141
1.0000 1.7720 0.0000
*/
function YCbCr2rgb(r,g,b) {
return {
r: r +1.4020*b,
g: r-0.3441*g -0.7141*b,
b: r+1.7720*g };
}
function rgb2hsv(r,g,b) {
var c=rgb2YCbCr(r,g,b);
var s=Math.sqrt(c.g*c.g+c.b*c.b),
h=Math.atan2(c.g,c.b);
return {h:h, s:s, v:c.r };
}
function hsv2rgb(h,s,v) {
var g=s*Math.sin(h),
b=s*Math.cos(h);
return YCbCr2rgb(v,g,b);
}
for (var px=0;px<len;px+=4){
sA = src[px+3]/255;
dA = dst[px+3]/255;
dA2 = (sA + dA - sA*dA);
dst[px+3] = dA2*255;
r1=dst[px], g1=dst[px+1], b1=dst[px+2];
r2=src[px], g2=src[px+1], b2=src[px+2];
sRA = r2/255*sA;
dRA = r1/255*dA;
sGA = g2/255*sA;
dGA = g1/255*dA;
sBA = b2/255*sA;
dBA = b1/255*dA;
demultiply = 255 / dA2;
var f1=dA*sA, f2=dA-f1, f3=sA-f1;
switch(blendMode){
// ******* Very close match to Photoshop
case 'normal':
case 'src-over':
dst[px ] = (sRA + dRA - dRA*sA) * demultiply;
dst[px+1] = (sGA + dGA - dGA*sA) * demultiply;
dst[px+2] = (sBA + dBA - dBA*sA) * demultiply;
break;
case 'screen':
dst[px ] = (sRA + dRA - sRA*dRA) * demultiply;
dst[px+1] = (sGA + dGA - sGA*dGA) * demultiply;
dst[px+2] = (sBA + dBA - sBA*dBA) * demultiply;
break;
case 'multiply':
dst[px ] = (sRA*dRA + sRA*(1-dA) + dRA*(1-sA)) * demultiply;
dst[px+1] = (sGA*dGA + sGA*(1-dA) + dGA*(1-sA)) * demultiply;
dst[px+2] = (sBA*dBA + sBA*(1-dA) + dBA*(1-sA)) * demultiply;
break;
case 'difference':
dst[px ] = (sRA + dRA - 2 * Math.min( sRA*dA, dRA*sA )) * demultiply;
dst[px+1] = (sGA + dGA - 2 * Math.min( sGA*dA, dGA*sA )) * demultiply;
dst[px+2] = (sBA + dBA - 2 * Math.min( sBA*dA, dBA*sA )) * demultiply;
break;
// ******* Slightly different from Photoshop, where alpha is concerned
case 'src-in':
dA2 = sA*dA;
demultiply = 255 / dA2;
dst[px ] = sRA*dA * demultiply;
dst[px+1] = sGA*dA * demultiply;
dst[px+2] = sBA*dA * demultiply;
dst[px+3] = dA2*255;
break;
case 'plus':
case 'add':
// Photoshop doesn't simply add the alpha channels; this might be correct wrt SVG 1.2
dst[px ] = Math.min(sRA + dRA,1) * demultiply;
dst[px+1] = Math.min(sGA + dGA,1) * demultiply;
dst[px+2] = Math.min(sBA + dBA,1) * demultiply;
break;
case 'overlay':
dst[px] = f1*Foverlay(r1,r2) + f2*r1 + f3*r2;
dst[px+1] = f1*Foverlay(g1,g2) + f2*g1 + f3*g2;
dst[px+2] = f1*Foverlay(b1,b2) + f2*b1 + f3*b2;
break;
case 'hardlight': // hardlight(a,b) = overlay(b,a)
dst[px] = f1*Foverlay(r2,r1) + f2*r1 + f3*r2;
dst[px+1] = f1*Foverlay(g2,g1) + f2*g1 + f3*g2;
dst[px+2] = f1*Foverlay(b2,b1) + f2*b1 + f3*b2;
break;
case 'colordodge':
case 'dodge':
dst[px] = f1*Fdodge(r1,r2) + f2*r1 + f3*r2;
dst[px+1] = f1*Fdodge(g1,g2) + f2*g1 + f3*g2;
dst[px+2] = f1*Fdodge(b1,b2) + f2*b1 + f3*b2;
break;
case 'colorburn':
case 'burn':
dst[px] = f1*Fburn(r1,r2) + f2*r1 + f3*r2;
dst[px+1] = f1*Fburn(g1,g2) + f2*g1 + f3*g2;
dst[px+2] = f1*Fburn(b1,b2) + f2*b1 + f3*b2;
break;
case 'darken':
case 'darker':
dst[px] = f1*(r1<r2 ? r1 : r2) + f2*r1 + f3*r2;
dst[px+1] = f1*(g1<g2 ? g1 : g2) + f2*g1 + f3*g2;
dst[px+2] = f1*(b1<b2 ? b1 : b2) + f2*b1 + f3*b2;
break;
case 'lighten':
case 'lighter':
dst[px ] = (sRA<dRA ? dRA : sRA) * demultiply;
dst[px+1] = (sGA<dGA ? dGA : sGA) * demultiply;
dst[px+2] = (sBA<dBA ? dBA : sBA) * demultiply;
break;
case 'exclusion':
dst[px ] = (dRA+sRA - 2*dRA*sRA) * demultiply;
dst[px+1] = (dGA+sGA - 2*dGA*sGA) * demultiply;
dst[px+2] = (dBA+sBA - 2*dBA*sBA) * demultiply;
break;
case 'softlight':
dst[px] = f1*Fsoftlight(r1,r2) + f2*r1 + f3*r2;
dst[px+1] = f1*Fsoftlight(g1,g2) + f2*g1 + f3*g2;
dst[px+2] = f1*Fsoftlight(b1,b2) + f2*b1 + f3*b2;
break;
case 'luminosity':
var hsl = rgb2YCbCr(r1,g1,b1);
var hsl2 = rgb2YCbCr(r2,g2,b2);
var rgb=YCbCr2rgb(hsl2.r, hsl.g, hsl.b);
dst[px] = f1*rgb.r + f2*r1 + f3*r2;
dst[px+1] = f1*rgb.g + f2*g1 + f3*g2;
dst[px+2] = f1*rgb.b + f2*b1 + f3*b2;
break;
case 'color':
var hsl = rgb2YCbCr(r1,g1,b1);
var hsl2 = rgb2YCbCr(r2,g2,b2);
var rgb=YCbCr2rgb(hsl.r, hsl2.g, hsl2.b);
dst[px] = f1*rgb.r + f2*r1 + f3*r2;
dst[px+1] = f1*rgb.g + f2*g1 + f3*g2;
dst[px+2] = f1*rgb.b + f2*b1 + f3*b2;
break;
case 'hue':
var hsl =rgb2hsv(r1,g1,b1);
var hsl2=rgb2hsv(r2,g2,b2);
var rgb=hsv2rgb(hsl2.h, hsl.s, hsl.v);
dst[px] = f1*rgb.r + f2*r1 + f3*r2;
dst[px+1] = f1*rgb.g + f2*g1 + f3*g2;
dst[px+2] = f1*rgb.b + f2*b1 + f3*b2;
break;
case 'saturation':
var hsl =rgb2hsv(r1,g1,b1);
var hsl2=rgb2hsv(r2,g2,b2);
var rgb=hsv2rgb(hsl.h, hsl2.s, hsl.v);
dst[px] = f1*rgb.r + f2*r1 + f3*r2;
dst[px+1] = f1*rgb.g + f2*g1 + f3*g2;
dst[px+2] = f1*rgb.b + f2*b1 + f3*b2;
break;
case 'lightercolor':
var rgb = 2.623*(r1-r2)+5.15*(g1-g2)+b1-b2>0 ? {r:r1,g:g1,b:b1} : {r:r2,g:g2,b:b2};
dst[px] = f1*rgb.r + f2*r1 + f3*r2;
dst[px+1] = f1*rgb.g + f2*g1 + f3*g2;
dst[px+2] = f1*rgb.b + f2*b1 + f3*b2;
break;
case 'darkercolor':
var rgb = 2.623*(r1-r2)+5.15*(g1-g2)+b1-b2<0 ? {r:r1,g:g1,b:b1} : {r:r2,g:g2,b:b2};
dst[px] = f1*rgb.r + f2*r1 + f3*r2;
dst[px+1] = f1*rgb.g + f2*g1 + f3*g2;
dst[px+2] = f1*rgb.b + f2*b1 + f3*b2;
break;
default: // ******* UNSUPPORTED mode, produces yellow/magenta checkerboard
var col = (px/4) % this.canvas.width,
row = Math.floor((px/4) / this.canvas.width),
odd = (col%8<4 && row%8<4) || (col%8>3 && row%8>3);
dst[px] = dst[px+3] = 255;
dst[px+1] = odd ? 255 : 0;
dst[px+2] = odd ? 0 : 255;
}
}
destContext.putImageData(dstD,offsets.destX,offsets.destY);
}
})();
Are photoshop-like blend modes possible in HTML5?
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 currently-supported blend modes.
You could use this to perform multiply from one canvas to another, but not over standard HTML elements.
Related Topics
How to Detect When a New Element Has Been Added to the Document in Jquery
How to Automatically Close Alerts Using Twitter Bootstrap
JavaScript - Loading/Busy Indicator or Transparent Div Over Page on Event Click
How to Retrieve the Angle in CSS3 Rotate
Animate Length of Border-Bottom
Why Do People Minify CSS and JavaScript, When We Have Gzip
Using JavaScript Calculated Values in Less
Make Webelement Visible via Selenium with Python with JavaScript
Download Attribute Not Working in Firefox
Remove Specific HTML Tag with Its Content from JavaScript String
Bootstrap 3: How to Make Head of Dropdown Link Clickable in Navbar
Google Chrome Copy CSS Path in Developer Tools
How to Create and Apply CSS to JavaScript Alert
A Way to Count Columns in a Responsive Grid