js处理(压缩)图片

有一些人压缩图片通过修改图片质量，比如下面canvas.toDataURL(imgtype, 1)通过修改第二个参数的数值。但是这个压缩率不行，而且不太好，试过几个图片，有的图片体积还会增加，就算减少也是比较少的

之前有做过一个身份证识别的，主要是将用户拍的身份证照片传给后端。但是我们知道有的手机的分辨率什么都特别高，导致照片的体积非常的大，这样对用户不友好，对服务器也不太友好。所以我们就需要处理一下图片，具体需要做的是裁剪出框框里面的图。我使用的是canvas，对照片进行重绘（等比例缩小），然后再根据框框所在的位置对图片进行裁剪。这样处理后上传真的非常的快了。这样大家都开心了。
重点是比例要设好
部分代码如下（制作了比例重绘，位置这里没有处理）

compressImg(base64) {
    var imgtype = 'image/jpeg'
    var img = new Image()
    img.src = base64
    img.onload = function() {
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      var width = 400 // 压缩后的图片的宽度
      var sca = img.width / width // 缩放比例
      var height = img.height / sca
      img.width = width
      img.height = height
      canvas.setAttribute('width', width + '')
      canvas.setAttribute('height', height + '')
      // 将图片画入canvas
      ctx.drawImage(img, 0, 0, img.width, img.height)
      let imgData = canvas.toDataURL(imgtype, 1) //压缩后的图片
      }
  }