如何在fabricjs中缩放后获取图像数据答案

【问题标题】：How to get data of an image after scale in fabricjs如何在fabricjs中缩放后获取图像数据
【发布时间】：2018-07-16 23:10:30
【问题描述】：

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

有人知道怎么做吗？太棒了，提前谢谢！！

【问题讨论】：

标签： javascript scale fabricjs

【解决方案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;
},

【讨论】：