如何缩小图像以适应 canvas，而不扭曲图像？

Question

我有一个允许用户添加外部图像的 fabric js canvas。通常用户添加的图像太大而不适合 canvas 并且他们很难正确调整它们的大小。

我想自动缩小较大的图像，以便图像保持其纵横比但适合 canvas。

fabric.js api 中有什么东西可以做到这一点，还是我需要计算比率并设置比例 x\y？

我已经试过了，但它会扭曲图像。

 oImg.set({
                    left: _fabicCanvas.width / 2,
                    top: _fabicCanvas.height / 2,
                    scaleY: _fabicCanvas.height / oImg.height,
                    scaleX: _fabicCanvas.width / oImg.width
                });

Answer 1

1) 确定哪个尺寸超过了要放入图像的 window 尺寸。如果两者都超过尺寸，请计算两个因数并使用最大的：

width_factor = imagewidth / allowable_width
height_factor = imageheight / allowable_height

2) 按相同的系数缩放高度和宽度。例如。如果超出宽度：

factor = imagewidth / allowable_width

如何缩小图像以适应 canvas，而不扭曲图像？

How to scale an image down to fit inside a canvas, without distorting the image?

html

canvas

fabricjs