欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

代码仅供参考,无法直接运行哦~

相关标签: CSS 和JS