加载应用了图像过滤器的 fabric.image 的织物 js 子类答案

【问题标题】：Loading fabric js subclass of fabric.image with an image filter applied加载应用了图像过滤器的 fabric.image 的织物 js 子类
【发布时间】：2012-10-13 05:09:19
【问题描述】：

我在加载保存到我的子类图像对象的图像过滤器时遇到问题。这是我的子类的代码：

fabric.TopImage = fabric.util.createClass(fabric.Image, {

    type: 'top-image',

    initialize: function (element, options) {
        this.callSuper('initialize', element, options);
        this.set('name', 'top');
        this.set('lockUniScaling', true);
    },

    toObject: function () {
        return fabric.util.object.extend(this.callSuper('toObject'), { name: this.name });
    }

});

fabric.TopImage.fromObject = function (object, callback) {
    fabric.util.loadImage(object.src, function (img) {
        callback && callback(new fabric.TopImage(img, object));
    });
};

fabric.TopImage.async = true;

无需应用任何过滤器即可正常工作。

我通过以下方式向该子类的实例添加过滤器：

objectToFilter.filters[0] = new fabric.Image.filters.RemoveWhite({threshold: 20, distance: 20});
objectToFilter.applyFilters(canvas.renderAll.bind(canvas));

保存对象通过带有类型、阈值和距离的过滤器对象。

但是加载此对象会导致 all.js 文件中的错误：

Uncaught TypeError: Object #<Object> has no method 'applyTo'

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

由于您从未在此处调用 Image.fromObject 函数，因此过滤器永远不会初始化并且无法应用。为了使过滤器按预期工作，请改用此函数：

fabric.TopImage.fromObject = function (object, callback) {
    fabric.util.loadImage(object.src, function (img) {
            var oImg = new fabric.TopImage(img);
            oImg._initConfig(object);
            oImg._initFilters(object);
            callback(oImg);
    });
};

【讨论】：