Javascript 上传时保留图像比例

在我上传图片到konva.js时，有没有办法保持图片比例。基本上，我使用的是带有Vue扩展的konva，我需要一种上传背景图像的方法。我已经根据用户设备设置了画布尺寸，我可以将上传图像的尺寸设置为画布尺寸，但不会保存其比例

---

我认为，我可以通过编写函数来确定图像可以达到的最大高度或宽度（在特定情况下选择哪个更合适），然后按比例调整大小，但我认为这个答案并不优雅，也没有bug，所以我想在做之前我会问一下。

你需要自己处理图像缩放，但这并不困难

正如您所确定的，您需要一个函数来设置图像的比例以覆盖视口，同时保留纵横比

所需的数学是计算视口宽度与图像宽度的比率，高度也是如此。然后比较这两个比率并使用较大的比率

除非视口和图像的纵横比完全相同，否则您会发现一些图像被剪裁，如选择300x500按钮时在片段中所示

下面的代码片段显示了表示视口的粉红色矩形。“标注”按钮可更改视口比例，“宽度x高度”按钮可调用不同的图像。使用Comniation中的按钮，您可以看到配件功能是如何工作的

实验1：开始时，反复单击“加宽”按钮，查看图像顶部和底部的部分是如何在视口外剪裁的

实验2：开始时，反复点击“缩小”，观察类似效果

/*
函数计算并返回适当的比例，以在保留纵横比的同时用另一个矩形填充一个矩形
*/
var自动缩放=函数（容器，imgEle）{
var rW=container.width（）/imgEle.width；
var rH=container.height（）/imgEle.height；
var标度=（rW

更窄的
更广的
更短的
更高的
300 x 300
300 x 500
500 x 300
600 x 600
我的处理方式基本相同，但非常感谢wall的参与。