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

看看这个 fiddle :https://jsfiddle.net/hazeebp/195uan6f/1/