Html5 canvas FabricJS：如何自动调整图像大小以适应组或矩形对象？

目标：我正在寻求将图像添加到FabricJS组或矩形对象，并使图像保持其原始纵横比和中心拟合的父宽度/高度

我不希望图像溢出显示，但将在以下示例中以不透明程度较低的绿色显示溢出：

---

横向图像示例：

如果它是一个面向风景的图像，它会缩放到最大高度，但随后会在宽度位置上居中：

由于我不希望图像溢出显示，最终产品应如下所示：

---

肖像图像示例：

类似地，如果图像是纵向的，则图像将在宽度上缩放100%，但在高度上居中：

然后消除溢出，这就是我想要的最终产品：

---

以下是我迄今为止的stackblitz：

基本案例代码如下：

this.canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
    left: 100,
    top: 50,
    width: 450,
    height: 200,
    fill: '#e3e3e3',
});

var rectGroup = new fabric.Group([rect], {
    name: 'Rectangle',
});

this.canvas.add(rectGroup);

fabric.Image.fromURL('https://placehold.it/888x500&text=16:9', (img) => {
    let bounds = rectGroup.getBoundingRect();

    const scaleFactor = Math.min(
        Math.min(bounds.width / img.width),
        Math.min(bounds.height / img.height)
    );
    img.scale(scaleFactor);

    img.set({
        top: bounds.top + Math.max(bounds.height - img.height * scaleFactor, 0)/2,
        left: bounds.left + Math.max(bounds.width - img.width * scaleFactor, 0)/2,
    });

    rectGroup.addWithUpdate(img);
    this.canvas.renderAll();
}

---

这显然不是正确的解决方案，而是一个开始。有什么建议吗？

我想出来了，下面是Stackblitz：

首先，我通过一个

if/else

语句比较了矩形纵横比是否与图像成比例，该语句决定是否最初将图像缩放为矩形宽度/高度

然后我将图像的top或left属性设置为矩形边界点。然后计算矩形的中心点并减去图像边界的一半，最后，将矩形组对象的

clipPath

设置为矩形的中心点，这就成功了

---

---

这里有点晚了，但如果有人插话，这可能会有帮助

您使用

Math.min

朝着正确的方向前进，但是您可以使用

Math.max

来代替组/图像比率较大的一侧，以缩放到一侧的全长。然后可以将x y原点设置为

中心

fabric.Image.fromURL('https://placehold.it/888x500&text=16:9', (img) => {
    let bounds = rectGroup.getBoundingRect();

    const scaleFactor = Math.max(bounds.width / img.width, bounds.height / img.height);

    img.set({
      originX: 'center',
      originY: 'center',
      scaleX: scaleFactor,
      scaleY: scaleFactor
    });

    rectGroup.addWithUpdate(img);
    this.canvas.renderAll();
}

fabric.Image.fromURL('https://placehold.it/888x500&text=16:9', (img) => {
    let bounds = rectGroup.getBoundingRect();

    const scaleFactor = Math.max(bounds.width / img.width, bounds.height / img.height);

    img.set({
      originX: 'center',
      originY: 'center',
      scaleX: scaleFactor,
      scaleY: scaleFactor
    });

    rectGroup.addWithUpdate(img);
    this.canvas.renderAll();
}