如何保留加载到画布上的图像的宽高比？当图像从本地系统加载到画布上时,我正在创建宽度= 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);
