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

Posted 2023-03-24

【中文标题】FabricJS 缩放图像以适应宽度/大小

【英文标题】：FabricJS scale image to fit width / size

【发布时间】：2018-08-18 02:58:31

【问题描述】：

如何正确缩放图像以适合容器大小？我想要一个由两个图像组成的网格，每个图像都适合提供的大小。

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

【问题讨论】：

如果您希望在对象中包含响应式对象，我只是在这里解决了它：***.com/questions/58719714/…

【参考方案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/

【讨论】：

感谢您的帖子。我已经编辑了我上面的帖子。抱歉，我之前发帖时没有说得更清楚。