关于croptool无法裁剪分辩率过低的图片
在使用croptool.js时,如果图片的分辨率过低,则无法裁剪超过分辨率的大小。比如说
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | function chooseImg(event){ var files = event.files || event.dataTransfer.files, file = files[0] || files; event.value = '' ; window.clip = new Clip({ dragBoxClass: 'block' , //裁剪框类名 clipRadio: 1 / 1, //裁剪比例 宽/高 传0或空或不传等于不设置比例 //单位px 仅为裁剪框的宽高 不等同裁剪后最终图片宽高 initialHeight: 100, //裁剪框初始高度 initialWidth: 100, //裁剪框初始宽度 minHeight: 100, //裁剪框最小高度 minWidth: 100, //裁剪框最小宽度 maxWidth: 450, //裁剪框最大宽度 不会大于裁剪区域宽度 取值需大于最小宽高 maxHeight: 450, //裁剪框最大高度 不会大于裁剪区域高度 cornerColor: '#39f' , //裁剪框颜色 encode: 'base64' , //文件类型 type: 'png' , //保存图片类型 name: 'img' , //文件名字 quality: 1, //压缩质量 //裁剪完成 onDone: function (e) { console.log(e); //return false; document.getElementById( 'previewImg' ).src = e; }, onCancel: function (){ } }); clip.setSize(file); } |
在上面这个函数中,明确说明裁剪框最大的高度和宽度为450,但是如果选择图片文件的分辨率为180*180,那么裁剪框的最大裁剪范围也会变成180*180。

注意css样式。此时裁剪框最大是180*180;
解决方法:打开croptool.js做以下修改
找到以下两个三元运算
_this.opt.maxWidth=parseInt(_this.opt.maxWidth>w?w:_this.opt.maxWidth);
_this.opt.maxHeight=parseInt(_this.opt.maxHeight>h?h:_this.opt.maxHeight);
修改为
_this.opt.maxWidth=parseInt(_this.opt.maxWidth>w?_this.opt.maxWidth:_this.opt.maxWidth);
_this.opt.maxHeight=parseInt(_this.opt.maxHeight>h?_this.opt.maxHeight:_this.opt.maxHeight);
修改后效果:

因为使用开发者工具所以裁剪区域变形,不使用开发者工具时是正常的。重点是css样式。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)