我正在尝试在Fabric.js中创建自定义过滤器。但是我想使用Caman.js的过滤器集。我觉得我在这里很近,但似乎无法让它发挥作用。任何人都有结合这两者的经验,或者看看我在哪里可能会出错?
没有控制台错误。现在我试图用从Caman.js渲染的新数据设置putImageData
......没有运气。我可以在控制台中看到数据。帮助
(function(global) {
'use strict';
var fabric = global.fabric || (global.fabric = { });
/**
* Lomo filter for fabricjs
* Example:
* obj.filters.push(new fabric.Image.filters.Lomo(6));
* obj.applyFilters(canvas.renderAll.bind(canvas));
*/
fabric.Image.filters.Lomo = fabric.util.createClass(fabric.Image.filters.BaseFilter, {
/**
* Filter type
* @param {String} type
* @default
*/
type: 'Lomo',
/**
* Applies filter to canvas element
* @memberOf fabric.Image.filters.Lomo.prototype
* @param {Object} canvas element to apply filter to
*/
applyTo: function(canvas) {
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var imageData = context.getImageData(0, 0, width, height);
var c = Caman(canvas, function(value) {
this.lomo().render();
});
Caman.Event.listen(c, 'processComplete', function(job) {
console.log(this.imageData);
context.putImageData(this.imageData, 0, 0);
});
}
});
fabric.Image.filters.Lomo.fromObject = function(object) {
return new fabric.Image.filters.Lomo(object);
};
})(typeof exports !== 'undefined' ? exports : this);