基于canvas的图片压缩函数实现

桃扇骨 2022-03-07 11:54 149阅读 0赞

# 由于图片压缩中使用了大量异步操作，这里使用es7 async 语法处理异步问题 #

> 基本思路是:先将file数据读取为DataUrl类型的数据，再将DataUrl绘制到canvas，  
> 通过canvas的apitoDataURL转换为base64数据并压缩数据，最后再将base64数据转换  
> 为blob数据类型，再上传到服务器。整个流程就完成了。下面是具体的实现方式。

### 1.读取file转换为DataUrl ###

async function fileLoad(file){
            return new Promise((resolve)=>{
                let ready = new FileReader();
                /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,
                readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,
                则调用之.同时,result属性中将包含一个data: URL格式的字符串以表
                示所读取文件的内容.*/
                ready.readAsDataURL(file);
                ready.onload = function () {
                    resolve(this.result);
                }
            })
        }

### 2.将数据绘制到canvas上，压缩数据 ###

async function canvasDataURL(path, obj) {
            return new Promise((resolve)=>{
                let img = new Image();
                img.src = path;
                img.onload = function () {
                    let that = this;
                    // 默认按比例压缩
                    let w = that.width,
                        h = that.height,
                        scale = w / h;
                    w = obj.width || w;
                    h = obj.height || (w / scale);
                    let quality = 0.7;  // 默认图片质量为0.7
                    //生成canvas
                    let canvas = document.createElement('canvas');
                    let ctx = canvas.getContext('2d');
                    // 创建属性节点
                    let anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    let anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);
                    canvas.setAttributeNode(anh);
                    ctx.drawImage(that, 0, 0, w, h);
                    // 图像质量
                    if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                        quality = obj.quality;
                    }
                    // quality值越小，所绘制出的图像越模糊
                    let base64 = canvas.toDataURL('image/jpeg', quality);
                    // 回调函数返回base64的值
                    resolve(base64);
                }
            });
        }

### 3.将bas64转换为blob ###

async function convertBase64UrlToBlob(urlData) {
            return new Promise((resolve)=>{
                let arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                let blob = new Blob([u8arr], {type: mime});
                resolve(blob);
            })
        }

### 4.最后实现压缩方法 ###

/**
         * 三个参数
         * file：一个是文件(类型是图片格式)，
         * w：配置对象
         * photoCompress()
         */
    async function photoCompress(file, w) {
            let re = await fileLoad(file);
            let base64 = await canvasDataURL(re, w);
            let blob = await convertBase64UrlToBlob(base64);
            return new Promise((resolve)=>{
                resolve(blob);
            })
    }

### 5.使用方法 ###

async function upload(file) {
        let form = new FormData();
        let fileData = await photoCompress(file, {
            quality: 0.5
      });
     form.append('pictrue',fileData,file.name);
     // 上传form
    }