6

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?

Dominik Seemayr
  • 830
  • 2
  • 12
  • 30

2 Answers2

11

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.

dylanjameswagner
  • 554
  • 3
  • 6
markE
  • 102,905
  • 11
  • 164
  • 176
  • I 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` where `opacity` is a value between `0` and `1` (e.g. `0.75` would be a 75% opaque multiply layer). obviously this needs to be applied to all three color channels. – Joseph Marikle Nov 02 '17 at 20:12
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>

Olivier Royo
  • 810
  • 10
  • 13