H5 上传图片的前端 利用 canvas 压缩图片

标签：compress   tee   输出   通过   地图   lse   出图   wim   服务   

H5 通过 input 获取本地图片后上传服务器是，图片大小会极大的耗费网络，和服务器资源，所以此时我们就要对上传的图片进行压缩后上传
compress(file) {
  if (file.file && (file.file.size > 1024*1024*.3)){　// 设置文件压缩的阈值
    let image = new Image()
    image.src = file.url
    image.onload = function () {
      let that = this
      let w = that.width,　　　　//　　图片的宽
        h = that.height　　　　//　　图片的长
      if (w > 1000 || h > 1000){　　　　// 压缩图片时最长的一条边长是多少，通过计算获取该图片等比例缩放时另一条边的长度
        if (w >= h){
          h = parseInt(1000 * h / w)
          w = 1000
        }else {
          w = parseInt(1000 * w / h)
          h = 1000
        }
      }
      let canvas = document.createElement(‘canvas‘)　　
      let ctx = canvas.getContext(‘2d‘)
      canvas.width  = w
      canvas.height = h
      ctx.drawImage(that, 0, 0, w, h)
      let base64 = canvas.toDataURL(‘image/jpeg‘, .75)　　　　//　　设置输出图片的质量
    }
  }
}

H5 上传图片的前端 利用 canvas 压缩图片

标签：compress   tee   输出   通过   地图   lse   出图   wim   服务   

原文地址：https://www.cnblogs.com/ygrzzttzjzzzszz/p/14345926.html