Blend mode:multiply in Internet Explorer
11,816
Solution 1
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.
Solution 2
Here I found a fully css solution:
https://teamtreehouse.com/community/fallback-for-css-blending-modes
which is:
<!--[if IE]>
<style>
.yourTargetClass:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: rgba(10, 36, 54, 0.9); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */
}
</style>
Comments
-
Dominik Seemayr almost 2 years
I need to have an Image blended together with an red square in mode multiply. As I know, IE and Safari doesn't support the css-property "blend-mode", so I tried it with blending them together in a canvas and everything worked fine - except in IE. Is there any way to get those blended together in IE or isn't that supported yet?
-
Rudi Ørnhøj over 7 yearsNot useful, opacity is not the same as multiply
-
leymannx over 7 years@RudiØrnhøj – You are right. It's not the same. It's a fallback. And it's pure CSS. Upvote incoming.
-
Olivier Royo over 7 yearstrue but the target was to put a red border to the image, I think that makes the work.
-
Joseph Marikle over 6 yearsI found this answer very useful. To add to this, you can also mimic opacity of a multiplied layer. I found this one to be identical to Photoshop's multiply layer with opacity:
(255 - 255 * opacity + R * opacity) * data[i] / 255
whereopacity
is a value between0
and1
(e.g.0.75
would be a 75% opaque multiply layer). obviously this needs to be applied to all three color channels.