添加 resizeFilter 会使图像消失

Question

我创建了 FabricJS canvas 并添加了带有 resizeFilter 的图像。奇怪的是，当您将图像尺寸缩小一点时，图像就消失了。当没有 resizeFilter 添加到图像时，调整大小会按预期工作。

感谢您的帮助！

var canvas = new fabric.Canvas('c');
var imageSrc = "https://raw.githubusercontent.com/fabricjs/fabricjs.com/gh-pages/assets/pug.jpg";

fabric.Image.fromURL(imageSrc, function(img) {
  img.set({
    left: 10,
    scaleX: 0.52,
    scaleY: 0.52,
    top: 10,
  }, {
    crossOrigin: 'anonymous'
  });

  img.resizeFilter = new fabric.Image.filters.Resize({
    resizeType: 'lanczos'
  });
  img.applyResizeFilters();

  canvas.add(img);
});

canvas {
  border: 1px solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
1. Resize the image to make it smaller<br>
2. When it gets a bit smaller, the image disappears
<canvas id="c" width="400" height="400" class="c"></canvas>

Answer 1

您遇到跨源问题，请在使用 fabric.Image.fromURL 加载时将 crossOrigin: 'anonymous' 应用于图像对象。

演示版

var canvas = new fabric.Canvas('c');
var imageSrc = "https://raw.githubusercontent.com/fabricjs/fabricjs.com/gh-pages/assets/pug.jpg";

fabric.Image.fromURL(imageSrc, function(img) {
  img.set({
    left: 10,
    scaleX: 0.52,
    scaleY: 0.52,
    top: 10
  });
  img.resizeFilter = new fabric.Image.filters.Resize({
    resizeType: 'lanczos'
  });
  img.applyResizeFilters();
  canvas.add(img);
}, {
  crossOrigin: 'anonymous'
});

canvas {
  border: 1px solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>

添加 resizeFilter 会使图像消失

Adding a resizeFilter makes image vanish

fabricjs