在图像上应用矩阵后如何返回到以前的状态？

Question

我正在使用 Fabricjs，我正在使用它们的卷积应用一些图像过滤器。

但是超过200KB的图片速度会很慢。因此，我决定编写自己的逻辑来应用过滤器，然后调用 canvas.renderAll() 从图像 canvas.

更新 canvas

我可以使用内核应用浮雕 matrix: [ -2, -1, 0, -1, 1, 1, 0, 1, 2 ]

但是如何恢复到图像的原始状态，换句话说，我是否需要应用任何其他 kernel/matrix？

Answer 1

首先写自己的过滤器class:

(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) 有些过滤器是不可逆的，如果它们是可逆的，最好存储图像的副本而不是逐个像素地返回。

在图像上应用矩阵后如何返回到以前的状态？

How to get back to previous state after applying a matrix on a image?

canvas

image-processing

html5-canvas

fabricjs