Fabric.js - 将像素化滤镜应用于调整大小的图像

Question

目前，据我所知，Fabric.js 的工作方式是将其过滤器应用于原始图像，而不管它在 canvas 上的样子。有没有办法，通过 "branching" 像素化滤镜或通过其他方法，将滤镜应用于 canvas 上显示的图像，调整大小和方向？我该怎么做？

例如：我在 canvas 中有一张图片可以调整大小。用户调整它的大小。我想对该图像的 resized 版本应用滤镜，而不是原始上传的图像。

谢谢！

Answer 1

好的，我想我明白你想做什么了。假设您正在使用像素化滤镜并希望获得一致的块大小，而不管 canvas 上的图像有多大，您可以简单地将滤镜的块大小值设置为图像比例的函数。通过将 blocksize 计算放在 object:modified 事件中，它会在每次修改图像时重新计算。

canvas.on('object:modified', function(e) {
  var obj = e.target;
  if(obj.type == "image") {
      var blocksize = 16 / obj.scaleX;
      obj.filters[0].blocksize = blocksize;
      obj.applyFilters();
  }
});

Fabric.js - 将像素化滤镜应用于调整大小的图像

Fabric.js - Applying pixelate filter to resized image

fabricjs