在Fabric.js中保持图像的纵横比

Question

如何保持加载到画布上的图像的纵横比？当从本地系统加载图像到画布上时，我创建了一个图像对象，其中width=canvas.width和height=canvas.height。

但是质量丢失了。即使加载的图像分辨率更高。有没有办法保持加载的图像的纵横比？

- John

---

不太确定我是否理解。如果画布的宽高比与图像不同，因为您将宽度和高度都设置为画布的宽高，所以会失去纵横比。 - kangax

我是指在加载到画布上时自动适应图像质量。目前它是倾斜的，拉伸的。 - John

我知道这是一个旧帖子，但是你有没有找到任何解决方案 @John ，我正在遇到相同的问题？？但是我不是试图用图像设置背景，而只是在画布内添加对象。 - mane

Answer 1

我翻译得对吗：您想用图像填充画布，保持比例并隐藏溢出吗？

您应该重新计算它们：

cw，ch - 画布尺寸

iw，ih - 图像尺寸

ih = imgObj.naturalHeight;
iw = imgObj.naturalWidth;

fw, fh - 最终尺寸

width_ratio  = cw  / iw;
height_ratio = ch / ih;
if (width_ratio > height_ratio) {
    fw = iw * width_ratio;
    fh = ih*fw/iw;
} else {
    fh = ih * height_ratio;
    fw = iw*fh/ih;    
}

然后只需像这样提供选项

var image = new fabric.Image(imgObj);
image.set({
    width:fw,
    height:fh
});

canvas.add(image);

- Edmund Sulzanok