在圖像上應用矩陣後如何恢復到以前的狀態？

Question

我正在使用Fabricjs，我正在使用一些圖像過濾器使用它們的卷積。

但是，對於超過200KB的圖像大小，它會非常慢。 因此，我決定編寫自己的邏輯來應用濾鏡，然後調用canvas.renderAll（）從畫布畫布更新畫布。

我能夠使用的內核 matrix: [ -2, -1, 0, -1, 1, 1, 0, 1, 2 ]

申請壓紋但如何要回圖像的原始狀態，換句話說，我是否需要申請任何其他內核/矩陣？

Answer 1

首先編寫自己的過濾器類：

(function(global) { 

    'use strict'; 

    var fabric = global.fabric || (global.fabric = { }), 
     extend = fabric.util.object.extend; 

    fabric.Image.filters.MyFilter = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.MyFilter.prototype */ { 

    /** 
    * Filter type 
    * @param {String} type 
    * @default 
    */ 
    type: 'MyFilter', 

    /** 
    * Constructor 
    */ 
    initialize: function(options) { 
     options = options || { }; 
    }, 

    /** 
    * Applies filter to canvas element 
    * @param {Object} canvasEl Canvas element to apply filter to 
    */ 
    applyTo: function(canvasEl) { 
     var context = canvasEl.getContext('2d'), 
      imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height), 
      data = imageData.data, 

     for (var i = 0, len = data.length; i < len; i += 4) { 
     data[i] = 255 - data[i]; 
     data[i + 1] = 255 - data[i + 1]; 
     data[i + 2] = 255 - data[i + 2]; 
     } 

     context.putImageData(imageData, 0, 0); 
    }, 

    /** 
    * Returns object representation of an instance 
    * @return {Object} Object representation of an instance 
    */ 
    toObject: function() { 
     return extend(this.callSuper('toObject'), { 

     }); 
    } 
    }); 

    /** 
    * Returns filter instance from an object representation 
    * @static 
    * @param {Object} object Object to create an instance from 
    * @return {fabric.Image.filters.RemoveWhite} Instance of fabric.Image.filters.MyFilter 
    */ 
    fabric.Image.filters.MyFilter.fromObject = function(object) { 
    return new fabric.Image.filters.MyFilter(object); 
    }; 

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

其次，你的正常fabricjs邏輯應用濾鏡：

myimage.filters[0] = new fabric.Image.filters.MyFilter; 
myimage.applyFilters(canvas.renderAll.bind(canvas)); 

當你想回到正常的圖像做：

myimage.filters[0] = null; 
myimage.applyFilters(canvas.renderAll.bind(canvas)); 

一些注意事項：

1）如果你發佈的代碼是你的過濾器，它看起來像一個倒置的顏色過濾器可在：

fabric.Image.filters.Invert() 

2）如果你真的想再次反轉公式，你只需要重新運行過濾器如果你想使用自定義函數。

如果a = 255 - a，再次執行a = 255 - a將恢復到原始值。 3）一些濾波器是不可逆的，如果它們更好地存儲圖像的副本，而不是逐個像素地返回。