混合模式:在 Internet Explorer 中相乘 [英] Blend mode:multiply in Internet Explorer

问题描述

我需要在模式乘法中将图像与红色方块混合在一起.据我所知，IE 和 Safari 不支持 css-property混合模式"，所以我尝试在画布中将它们混合在一起，一切正常 - 除了在 IE 中.有没有办法在 IE 中将它们混合在一起，或者尚不支持?

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?

推荐答案

对于 Internet Explorer，Canvas 混合模式正在考虑中".

For Internet Explorer, Canvas blending modes are "under consideration".

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mixblendmode/?q=blend

在 IE 中实现混合之前，您可以滚动自己的乘法过滤器:

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.

这篇关于混合模式:在 Internet Explorer 中相乘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！