قضية الشفافية على IE مع مرشح BlendColor

هنا قليلا التجريبي حيث يمكنني استخدام مرشح 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

السلوك المتوقع

ينبغي أن تظل المنطقة الشفافة في بابوا غينيا الجديدة شفافة.

السلوك الفعلي

في IE أو Edge ، لم تعد المنطقة الشفافة في PNG شفافة بشكل كامل بعد الآن ، وأصبح جزء من المربع الأحمر الآن ورديًا.

أي خيوط هي موضع ترحيب ، وذلك بفضل!

0
أعتقد أنه قد يكون هناك اختلاف في المستعرض/الأخطاء في قنوات ألفا في IE. هذا هو المكان الذي قد يكون مصدر الخطأ github.com/fabricjs/fabric.js/blob/&hellip، . لكن لسوء الحظ ، لا يعمل موقع JSfiddle نفسه بشكل جيد في IE11 VM لمعرفة القيمة المتوفرة لهذا في حالة المتصفحات على حد سواء
وأضاف المؤلف Tarun Lalwani, مصدر
AndreaBogazzi ، لقد نظرت إلى الشفرة التي عدّلتها ، لكن لم يكن لدي أي فكرة عما إذا كان قد تم تنفيذه أو كان للرجوع إليه (تعليقات). ليس لديك فكرة عن WebGL. سعيد لقد قمت بتوفير الإصلاح. +1
وأضاف المؤلف Tarun Lalwani, مصدر
المشكلة هي webgl فقط ، وهذا السطر خارج سياق webgl
وأضاف المؤلف AndreaBogazzi, مصدر

1 إجابة

وبالتالي فإن المشكلة هنا هي بعض دعم Microsoft webgl crappy. لدينا 2 حالات ، EDGE و IE11.

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

سأحاول رفع الإصدار في أقرب وقت ممكن.

0
وأضاف