我创建了一个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>
答案 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>