过滤Fabricjs以消除红眼效果或更改图像对象的一部分

时间:2018-02-06 18:39:26

标签: fabricjs

我正在为fabricjs做一个红眼过滤器:

(function(global) {
        'use strict';
        var filters = fabric.Image.filters,
            createClass = fabric.util.createClass;

        filters.NoRedEyes = createClass(filters.BaseFilter,   {

            type: 'NoRedEyes',

            fragmentSource: 'precision highp float;\n' +
            'uniform sampler2D uTexture;\n' +
            'uniform float uMyParameter;\n' +
            'varying vec2 vTexCoord;\n' +
            'void main() {\n' +
            'vec4 color = texture2D(uTexture, vTexCoord);\n' +
            // add your gl code here
            'gl_FragColor = color;\n' +
            '}',

            myParameter: 0,

            mainParameter: 'myParameter',

            applyTo: function (options) {
                console.log(options);
                var canvasEl = options.targetCanvas;

                var context = canvasEl.getContext('2d'),
                    imageData = context.getImageData(this.left, this.top, this.width, this.height),
                    data = imageData.data;

                var p = imageData.width * imageData.height, pix = p * 4, r, g, b;
                while (p--) {
                    pix -= 4;
                    r = data[pix];
                    b = data[pix + 1];
                    g = data[pix + 2];

                    if (parseFloat(r / (g + b) / 2) > 0.5)  // лучший результат - 0.4 / 1.5 because it gives the best results
                    {
                        imageData.data[pix] = Math.round((g + b) / 2);
                    }
                }
                context.putImageData(imageData, this.left, this.top);
            },
        });

        fabric.Image.filters.NoRedEyes.fromObject = fabric.Image.filters.BaseFilter.fromObject;

})(typeof exports !== 'undefined' ? exports : this);

我有错误:

  

错误:WebGL警告:readPixels:Framebuffer未完成。 (状态:0x8cd7)   fabric.js:19844:3   错误:WebGL警告:readPixels:Framebuffer必须完整。

0 个答案:

没有答案