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应该在中心，同时保持宽高比）

- Peter I

---

如果您想要在对象内部拥有响应式对象，我刚刚在这里解决了：https://stackoverflow.com/questions/58719714/centering-and-scaling-canvas-object-inside-another-canvas-object-by-width-height/ - LatentDenis

Answer 1

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

我已经从您的代码中删除了img.set函数内指定的高度和宽度，并添加了一个scaleToHeight和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/

- Abdul Haseeb

---

感谢您的帖子。我已经编辑了我的上面的帖子。很抱歉之前发布时没有更清楚地表达。 - Peter I

让比例等于 Math.min(300 / img.width, 300 / img.height) img.scale(scale) canvas.add(img) 但是！如果角度为0，这个方法可以正常工作。 - Stanley Shauro