cropperjs 截图后 图片尺寸变大 ?
程序员文章站
2022-04-09 13:08:58
...
今天遇到了一个上传头像,限制最大上传1M的图片,在选择的时候已经限制了,但是经过截图处理后 图片又大于1M了,很郁闷啊~看了文档,想到了处理办法~ getCroppedCanvas(options)这方法需要设置 option里的宽高,宽高是值根据cropper.getData()这方法获取,但是不能超过1440px,否则转化为的Base64位图片后就算再转回温江形式 还是会大于1M的~~
const fileName = $(this)[0].value;
const suffixIndex = fileName.lastIndexOf(".");
const file = $(this)[0].files[0];
let suffix= fileName.substring(suffixIndex+1).toUpperCase(); //获取图片后缀
//...此处省略部分代码~
let jcrop = $('#jcropper').find("jcrop")[0];
let ImgData = jcrop.cropper.getData();
let w = Math.floor(ImgData.width);
let h = Math.floor(ImgData.height);
let options = {
width: w > 1080 ? 1080 : w,
height: h > 1080 ? 1080 : h,
minWidth: 88,
minHeight: 88,
maxWidth: w,
maxHeight: h,
imageSmoothingEnabled: false,
imageSmoothingQuality: 'high',
};
let cas = jcrop.cropper.getCroppedCanvas(options);// 获取被裁剪后的canvas
let base64Img = cas.toDataURL('image/' + suffix); // 转换为base64
代码仅供参考,无法直接运行哦~