如何保留加载到画布上的图像的宽高比?当图像从本地系统加载到画布上时,我正在创建宽度= 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);
原文地址:https://www.jb51.cc/js/155230.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。