Question

如何缩放图像以正确容纳容器尺寸？我想要一个两个图像和每个图像的网格，以适应提供的大小。

https://codepen.io/peteringram0/pen/gebYWo?editors=0010

img.set({
    left: 0,
    top: 0,
    width: 300,
    height: 300
    // Scale image to fit width / height ?
 });

编辑：对不起，我没有非常清楚地解释我的问题。我希望将它定位在网格中，但作为一个封面＆＃39;类型。 https://codepen.io/peteringram0/pen/xWwZmy?editors=0011。例如。在链接中，网格中有4个图像，但图像位于中心并且溢出。我想让每个图像垂直居中，没有超出设定大小的溢出。谢谢（x应该在中心，同时保持纵横比）

Answer 1

如果要将图像对象缩放到给定的宽度或高度，请分别使用scaleToWidth和scaleToHeight。

我已从您的代码中删除了img.set函数中指定的高度和宽度。并添加了scaeToHeight和scaleToWidth方法。使用以下代码。

window.fabric.Image.fromURL(`https://images.unsplash.com/photo-1430418372158-66adfd0d88cb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a074583d6ecf670af630fa2a15bc82ef&auto=format&fit=crop&w=1353&q=80`, (img) => {
img.set({
left: 300,
top: 0
});
img.scaleToHeight(300);
img.scaleToWidth(300);
canvas.add(img);
})

看看这个小提琴：https://jsfiddle.net/hazeebp/195uan6f/1/

FabricJS缩放图像以适合宽度/大小

1 个答案: