保留Fabric.js中Image的纵横比

Question

如何保留加载到画布上的图像的宽高比？当图像从本地系统加载到画布上时,我正用width=canvas.width和创建图像对象height=canvas.height.

但质量缺失.即使加载的图像分辨率更高.有没有办法保留加载图像的宽高比？

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);