4

I'm trying to create a custom filter in Fabric.js. But I'd like to use the filter set of Caman.js. I feel like I'm very close here, but can't seem to get this to work. Where might I be going wrong here?

No console errors. Right now I'm trying to set the putImageData with the new data rendered from Caman.js, but no luck so far. I can see the data in console though.

(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);
halfer
  • 19,824
  • 17
  • 99
  • 186
Mike Barwick
  • 6,288
  • 6
  • 51
  • 76

0 Answers0