添加一个resizeFilter使图像消失

时间:2018-10-24 04:22:01

标签: fabricjs

我创建了一个FabricJS画布,并添加了一个带有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>

1 个答案:

答案 0 :(得分:2)

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

演示

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>