cropperjs 截图后 图片尺寸变大 ?

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值