Проблема прозрачности в IE с фильтром BlendColor - PullRequest
Новая
       6

Проблема прозрачности в IE с фильтром BlendColor

0 голосов
/ 25 апреля 2018

Вот небольшая демонстрация, где я использую фильтр BlendColor из фреймворка Fabric.js, чтобы сделать изображение синим.

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 илиКрай, прозрачная область PNG больше не полностью прозрачна, и часть красного квадрата теперь розовая.

Любые отведения приветствуются, спасибо!

1 Ответ

0 голосов
/ 28 апреля 2018

Так что проблема здесь в какой-то дерьмовой поддержке Microsoft webgl. У нас есть 2 случая, EDGE и IE11.

В IE11 предварительно умноженное значение alpha всегда установлено на true, в то время как EDGE выглядит так, как будто оно поддерживает параметр, но ошибка все равно есть.

example of the error

Текстура приобретает мягкий альфа-синеватый оттенок

Мне удалось решить проблему с изменением шейдера для каждого фильтра, думаю, за счет производительности для каждого браузера.

Отличие от этого: 

  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' +
    '}'

Я постараюсь выпустить релиз как можно скорее.

...