Taro开发微信小程序采坑系列--图片压缩

关于图片上传网上已经有很多资料了,随便搜搜,改改都能满足需求,重点说下图片压缩的问题。

原理其实很简单,主要是:

1、利用 canvas 的 drawImage 将目标图片画到画布上;

2、利用画布调整绘制尺寸,把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径;

3、根据后端接口的需要,转换成需要的格式(base64、Blob等)

注意:微信小程序的压缩代码和H5的压缩代码会有些区别

H5关键代码:

const ctx = Taro.createCanvasContext("canone")
        var img = new Image()
        img.src = filePath.file.path
        img.onload = () => {
          //清除画布上的内容
          ctx.clearRect(0, 0, canvasWidth, canvasHeight)
          //绘制图像到画布上
          ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight)
          //将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中
          ctx.draw(false, () => {
            //在 draw 回调里调用该方法才能保证图片导出成功
            Taro.canvasToTempFilePath({
              canvasId: "canone",
              destWidth: canvasWidth,
              destHeight: canvasHeight,
              //图片类型,jpeg 而不是 jpg,
              fileType: "jpeg",
              success: res2 => {
                // 将base64转换成 Blob(这里根据需要做相应转换)
                const blob = this.convertBase64UrlToBlob(res2.tempFilePath)
                const urlB = URL.createObjectURL(blob)
                console.log('------urlB---------',urlB)
                this.uploadLoader(fileNameKey,urlB,uploadType)
              }
            })
          })
        }

微信小程序关键代码:

//微信小程序中需要 this.$scope 参数(重要)
const ctx = Taro.createCanvasContext("canone",this.$scope)
setTimeout(() => {
  ctx.drawImage(filePath.file.path, 0, 0, canvasWidth, canvasHeight)
  ctx.draw(true, () => {
  Taro.canvasToTempFilePath({
    canvasId: "canone",
    destWidth: canvasWidth,
    destHeight: canvasHeight,
    success: res2 => {
    // 上传压缩后的图片 res2.tempFilePath
    this.uploadLoader(fileNameKey,res2.tempFilePath,uploadType)
    }
  },this.$scope)
  })
}, 0)
​

页面渲染:

return (
      
        
          
        
        
      
    )

完整代码,关注微信公众号获取
Taro开发微信小程序采坑系列--图片压缩_第1张图片

你可能感兴趣的:(技术积累)