使用BlendColor过滤器在IE上的透明度问题

Question

这是一个小小的演示，我使用Fabric.js框架中的过滤器BlendColor将图像变为蓝色。

https://jsfiddle.net/w2kdcs21/7/

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL(document.getElementById('logo').src, function(img) {
  img.filters.push(
    new fabric.Image.filters.BlendColor({
        color: '#222299',
      mode: 'tint'
    })
  );

  img.applyFilters();
  canvas.add(img);
});


// create a rectangle with angle=45
var rect = new fabric.Rect({
  left: 50,
  top: 50,
  fill: 'red',
  width: 100,
  height: 100
});
canvas.add(rect);

https://github.com/fabricjs/fabric.js/issues/4715

预期行为

PNG的透明区域应保持透明。

实际行为

在IE或Edge中，PNG的透明区域不再完全透明，红色方块的一部分现在是粉红色。

欢迎任何线索，谢谢！

Answer 1

所以这里的问题是一些糟糕的Microsoft webgl支持。 我们有2个案例，EDGE和IE11。

IE11已经预乘alpha总是设置为true，而EDGE看起来它支持参数，但无论如何都有bug。

纹理得到某种柔和的阿尔法蓝色

我设法修复了为每个过滤器修改着色器的问题，我认为这会牺牲每个浏览器的性能。

不同之处在于：

  tint: 'precision highp float;\n' +
    'uniform sampler2D uTexture;\n' +
    'uniform vec4 uColor;\n' +
    'varying vec2 vTexCoord;\n' +
    'void main() {\n' +
      'gl_FragColor = texture2D(uTexture, vTexCoord);\n' +
      'gl_FragColor.rgb *= (1.0 - uColor.a);\n' +
      'gl_FragColor.rgb += uColor.rgb;\n' +
    '}'

到此：

  tint: 'precision highp float;\n' +
    'uniform sampler2D uTexture;\n' +
    'uniform vec4 uColor;\n' +
    'varying vec2 vTexCoord;\n' +
    'void main() {\n' +
      'vec4 color = texture2D(uTexture, vTexCoord);\n' +
      'gl_FragColor = color;\n' +
      'if (color.a > 0.0) {\n' +
        'gl_FragColor.rgb *= (1.0 - uColor.a);\n' +
        'gl_FragColor.rgb += uColor.rgb;\n' +
        'gl_FragColor.a = color.a;\n' +
      '}\n' +
    '}'

我会尽快推迟发布。