Canvas Fabricjs-将画布背景缩放到'；包含'；在画布边界内

我试图设置一个正方形fabric.js画布的背景图像，这样它就可以在保持纵横比的同时，在较长的一侧填充画布，模拟css上的

背景大小：“contain”

效果

这意味着，如果图像是纵向的，则高度应填充屏幕，同时仍保持纵横比。否则，如果图像是横向的，则应在保持纵横比的同时填充宽度侧的画布

我有一把小提琴，它可以完全缩放和覆盖画布，有点类似于css上的“背景尺寸”：“覆盖”

---

但我还没能成功地修改它以实现我上面所说的。非常感谢您的帮助。

更改设置比例因子的条件，将

bgImage.width

与

bgImage.height

进行比较，如下所示：

        if (bgImage.width > bgImage.height) {
            scaleFactor = canvasWidth / bgImage.width;
            ...
        } else {
            scaleFactor = canvasHeight / bgImage.height;
            ...
        }

这应该能满足你的需要，这是小提琴：