JavaScript压缩图片，base64图片压缩

知道了图片压缩可能出现的问题，接下来就是压缩步骤了

1、场景

　　用input的形式选中图片往服务器上上传，如果图片太大，可能出现请求错误（包体过大的报错）

　　给input绑定onChange事件

            <input
              class="upload-after"
              accept="image/*"
              name="upload_after_input"
              id="upload_after_input"
              type="file"
              onchange="preview(this, 'j-after', 'delIconAfter', 'zoomIconAfter', 'back')"
            />

　2、使用函数处理图片

      function preview(that, imgId, delImgId, zoomImgId, inputId) {
        if (that.files.length === 0) {
          return
        }
        const read = new FileReader()
        read.readAsDataURL(that.files[0])
        read.onload = function (s) {
  　　　　　//这里还可以做其他处理
          imgHandle(imgId, s.target.result, inputId)
        }
      }

3、接下来就是图片进行转换

　　图片处理的思路

　　　　1、先创建一个image对象

　　　　2、获取原图的宽高（目的是为了压缩之后的图片和原图片等比）

　　　　3、使用canvas将原图另外绘制一次，在绘制的时候设置图片质量、宽、高（一共三个参数，可以控制生成的图片的大小，质量越高，生成之后的图片越大）

　　　　4、用canvas生成的base64图片，生成新的file文件，就是我们最终的文件了，把他放在自定义的变量里面，submit的时候，直接取变量里面的值

      function imgHandle(imgId, imgSrc, inputId) {
        imgIndex = inputId
        let img = new Image()
        img.src = imgSrc
        img.onload = function (params) {
          var that = this
          // 默认按比例压缩
          var w = that.width,
            h = that.height,
            scale = w / h
          var quality = 0.70 // 默认图片质量为0.7
          //生成canvas
          var canvas = document.createElement('canvas')
          var ctx = canvas.getContext('2d')
          // 创建属性节点
          var anw = document.createAttribute('width')
          anw.nodeValue = w
          var anh = document.createAttribute('height')
          anh.nodeValue = h
          canvas.setAttributeNode(anw)
          canvas.setAttributeNode(anh)
          ctx.drawImage(that, 0, 0, w, h)

          let base64 = canvas.toDataURL('image/jpeg', quality)
          imgObj[imgIndex] = dataURLtoFile(base64, imgIndex) // 将图片存到变量
        }
      }

4、base64图片生成file文件

      function dataURLtoFile(dataurl, filename) {
        //将base64转换为文件
        var arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, { type: mime })
      }

5、使用的时候，直接从变量里面取值就好

        fd.append('face', imgObj['face'])
        fd.append('back', imgObj['back'])