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

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 ?
 });

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

Answer 1

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

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

window.fabric.Image.fromURL(imgUrl, (img) => {
  img.set({
    left: 300,
    top: 0
  });
  img.scaleToHeight(300);
  img.scaleToWidth(300);
  canvas.add(img);
})

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