Question

我正在使用Fabricjs，我正在使用他们的卷积来应用一些图像滤镜。

但是图像尺寸超过200KB的速度要慢得多。因此，我决定编写自己的逻辑来应用过滤器，然后调用canvas.renderAll（）来从图像画布更新画布。

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

但是如何恢复原始图像状态，换句话说，我是否需要应用任何其他内核/矩阵？

Answer 1

首先编写自己的过滤器类：

public override int SaveChanges(System.Data.Objects.SaveOptions options)
{
    int? UserId = null;
    if (System.Web.HttpContext.Current != null) 
        UserId = (from user in Users.Where(u => u.UserName == System.Web.HttpContext.Current.User.Identity.Name) select user.Id).SingleOrDefault();

    foreach (ObjectStateEntry entry in ObjectStateManager.GetObjectStateEntries(EntityState.Added | EntityState.Modified))
    {
        Type EntityType = entry.Entity.GetType();

        PropertyInfo pCreated = EntityType.GetProperty("Created");
        PropertyInfo pCreatedById = EntityType.GetProperty("CreatedById");
        PropertyInfo pModified = EntityType.GetProperty("Modified");
        PropertyInfo pModifiedById = EntityType.GetProperty("ModifiedById");

        if (entry.State == EntityState.Added)
        {
            if (pCreated != null)
                pCreated.SetValue(entry.Entity, DateTime.Now, new object[0]);
            if (pCreatedById != null && UserId != null)
                pCreatedById.SetValue(entry.Entity, UserId, new object[0]);
        }
        if (pModified != null)
            pModified.SetValue(entry.Entity, DateTime.Now, new object[0]);
        if (pModifiedById != null && UserId != null)
            pModifiedById.SetValue(entry.Entity, UserId, new object[0]);
        }
    }

    return base.SaveChanges(options);
}

其次，使用普通的fabricjs逻辑应用过滤器：

(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);

当您想要恢复正常图像时：

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

一些注意事项：

1）如果您发布的代码是您的过滤器，它看起来像一个反转颜色过滤器：

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

2）如果你真的想再次反转公式，你只需要再次运行过滤器，如果你想使用自定义函数。

如果fabric.Image.filters.Invert()，再次执行a = 255 - a将恢复为原始值。

3）某些滤镜是不可逆的，如果它们是更好的存储图像副本而不是逐像素地返回。

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

1 个答案: