保留 Fabric 中图像的纵横比.js

Preserve the aspect ratio of Image in Fabric.js

本文关键字：js Fabric 图像 保留      更新时间：2023-09-26

如何保留加载到画布上的图像的纵横比？当图像从本地系统加载到画布上时，我正在创建带有width=canvas.width和height=canvas.height的图像对象。

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

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

您应该重新计算它们：

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);
相关文章：