javascript - 混合模式 :multiply in Internet Explorer

Question

我需要在乘法模式下将图像与红色方 block 混合在一起。 据我所知，IE 和 Safari 不支持 css 属性“混合模式”，因此我尝试将它们混合在 Canvas 中，一切正常 - 除了 IE。 有没有什么方法可以在 IE 中将它们混合在一起，或者目前还不支持这种方法？

Answer 1

对于 Internet Explorer，Canvas 混合模式“正在考虑中”。

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mixblendmode/?q=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);
}

而且这个乘法图像过滤器也是跨浏览器兼容的。