cropperjs 截图后图片尺寸变大？

最新推荐文章于 2024-01-05 15:34:43 发布

凌珞

最新推荐文章于 2024-01-05 15:34:43 发布

阅读量2k

点赞数

分类专栏： CSS 和JS

本文链接：https://blog.csdn.net/dyp330/article/details/107764956

版权

CSS 和JS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

今天遇到了一个上传头像，限制最大上传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

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