Question

我在我修改每个像素的图像上应用了一个滤镜。问题是当我更改图像的比例时，fabricjs始终将原始图像（比例缩放前）作为过滤器的输入。然后，我无法修改新数据的每个像素（在比例之后）。

有人知道怎么做吗？它会很棒，提前谢谢!!

Answer 1

这样做涉及您的期望。没有快捷方式或内置功能可以执行此操作。我创建了概念证明on this fork。这不是完美的-缓存已禁用。如果单击链接，您会发现此分支是从另一个POC branch of mine分叉的。我试图清理下面的代码。如果我将PR提交给父项目，我将更新此答案。

更改主要影响image.class.js的applyFilters功能：

  applyFilters: function(filters) {

  filters = filters || this.filters || [];
  filters = filters.filter(function(filter) { return filter; });
  if (this.group) {
    this.set('dirty', true);
  }
  if (filters.length === 0) {
    this._element = this._originalElement;
    this._filterScalingX = 1;
    this._filterScalingY = 1;
    return this;
  }

  var imgElement = this._scaledEl || this._originalElement,
      sourceWidth = imgElement.naturalWidth || imgElement.width,
      sourceHeight = imgElement.naturalHeight || imgElement.height;

  if (!this._filteredEl || this._filteredEl === this._originalElement) {
    // if the element is the same we need to create a new element
    var canvasEl = fabric.util.createCanvasElement();
    canvasEl.width = sourceWidth;
    canvasEl.height = sourceHeight;
    this._element = canvasEl;
    this._filteredEl = canvasEl;
  }
  else {
    // clear the existing element to get new filter data
    this._element = this._filteredEl;
    this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight);
  }

  if (!fabric.filterBackend) {
    fabric.filterBackend = fabric.initFilterBackend();
  }

  fabric.filterBackend.applyFilters(filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey);

  if (this._originalElement.width !== this._element.width ||
    this._originalElement.height !== this._element.height) {
    this._filterScalingX = this._element.width / this._originalElement.width;
    this._filterScalingY = this._element.height / this._originalElement.height;
  }
  return this;
},

如何在fabricjs中获取图像后的图像数据

1 个答案: