AntDesign 自定义图片上传前端压缩画质

为什么压缩图片？

应为现在公司没有使用云数据库从而为了减少服务器的消耗需要将用户上传的图片压缩

前端压缩图片的技术选择！

查阅资料发现当下两种压缩的方法！！第一种使用工具库实现 npm install image-conversion --save

第二种通过画布实现！！！

第一种实现方法连接：https://blog.csdn.net/Superman_peng/article/details/107740407

第二种实现：

Canvas

1、需要将我们上传的文件获取到将file传递到函数中

    //压缩图片CompressImg(file) {return new Promise(resolve => {// 图片压缩let reader = new FileReader(), img = new Image();reader.readAsDataURL(file);reader.onload = function (e) {img.src = e.target.result;};img.onload = function () {let canvas = document.createElement('canvas');let context = canvas.getContext('2d');//设置画布的宽高从而限制图片的宽高let originWidth = 300;let originHeight = 300;canvas.width = originWidth;canvas.height = originHeight;context.clearRect(0, 0, originWidth, originHeight);context.drawImage(img, 0, 0, originWidth, originHeight);canvas.toBlob(blob => {// 将blob对象转化为图片文件let imgFile = new File([blob], file.name, {type: file.type});resolve(imgFile);}, file.type, 0.2); // file压缩的图片类型};});},

2、此时图片也就压缩成功将图片imgFile传递到上传图片的方法中即可..........