混合模式：在Internet Explorer中倍增 [英] Blend mode:multiply in Internet Explorer

问题描述

我需要一个图像与模式乘法中的红色方块混合在一起。
我知道，IE和Safari不支持CSS属性混合模式，所以我试着把它们混合在一起在画布上，一切工作正常 - 除了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?

推荐答案

资源管理器，画布混合模式为正在考虑。

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

http://status.modern.ie/compositingandblendingincanvas2d?sort=status&term=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屋！