混合模式:在Internet Explorer中相乘

Question

我需要在模式乘法中将图像与红色正方形混合在一起.据我所知,IE和Safari不支持css-property"blend-mode",所以我尝试将它们在画布中混合在一起,一切正常 - 除了在IE中.有没有办法让这些在IE中混合在一起或者不支持呢？

Answer 1

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

http://status.modern.ie/compositingandblendingincanvas2d?sort=status&term=blend

在IE中实现混合之前,您可以使用自己的乘法过滤器:

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);
}

此多重图像过滤器也是跨浏览器兼容的.