이미지 필터가 적용된 fabric.image의 패브릭 js 하위 클래스로드

Question

서브 클래 싱 된 이미지 객체에 저장된 이미지 필터를로드하는 데 문제가 있습니다. 내 하위 클래스의 코드는 다음과 같습니다.

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' 

Answer 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); 
    }); 
};