canvas压缩图片方法

canvas压缩图片方法

因为最近项目需要实现一个图片组件，包含压缩，拖拽上传，复制上传，图片裁剪，兼容多图和单图上传功能，好像这类组件也比较少，所以自己就封装了一个，连带着相关知识也熟悉了。这里分开几篇写，下面先说一下图片压缩。

关于图片压缩好像有不少方法，这里我选了一种我认为比较好的方法，也就是很多图片插件里用到的canvas截图方法，原理就是将图片渲染到canvas上，再将canvas截取成一张图片。这里我单独写了两个方法，和其他部分完全解耦，基本上大家复制下来就能用,下面是代码，每一步都做了解释,有不明白的可以问我。

  //下面是压缩的主要方法，因为内部有异步操作所以返回一个Promise,当压缩成功可以then内可以返回一个压缩后的blob对象，方便上传
  //使用
  compressionImg（）.then((file)=> {let file = file})
  function compressionImg(file，size) {
        return new Promise((resolve,reject)=> {
        //文件大于size进行压缩，小于size直接返回 你可以用一个变量动态控制
          if(file.size/1024/1024 > size) { 
          //创建一个空的图片对象
            let image = new Image()
            //读取客户端上的文件
            let reader = new FileReader(); //创建一个canvas
            let canvas = document.createElement('canvas')  //返回一个用于在画布上绘图的环境
            let ctx = canvas.getContext('2d')//用文件读取对象进行读取
            reader.readAsDataURL(file)
            //读取完成后监听
            reader.onload = (e)=> {
              let url = e.target.result;//读取到的文件内容
              image.src= url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
            };
            image.onload = ()=> {
              let w = image.naturalWidth
              let h = image.naturalHeight
              canvas.width = w;
              canvas.height = h;
              ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h); 将图片绘制到canvas上这里大小就是图片大小
              let value = canvas.toDataURL('image/jpeg', 0.3);//将绘制的canvans再转成base64的url 这个0.3是你要压缩的比例，不要太小会很模糊，也不要太大会很卡
              let f = this.convertBase64UrlToBlob(value) //将base64的url再转成文件格式
              return  resolve(f)
            }
          }else {
            return  resolve(file)
          }

        })
      },
//下面这个方法是将base64格式的url转成blob对象方便上传
function convertBase64UrlToBlob(urlData) { //将Base64转成Blob
        let bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
        //处理异常,将ascii码小于0的转换为大于0
        let ab = new ArrayBuffer(bytes.length);
        let ia = new Uint8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], {type: 'image/jpeg'});
      },