小程序压缩图片尺寸

有api是压缩质量的:

wx.compressImage({
    src: originPath, // 图片路径
    quality: 90, // 压缩质量
    success: function (res) {
      res.tempFilePath//结果路径
    }
  })

压缩尺寸没有api,需要自己实现。

可使用canvas绘制图片,然后保存。设置画布的大小,相当于控制了图片尺寸。

实现步骤:
1.在wxml上定义画布:(不支持动态创建canvas)
<!-- 通过css控制在界面上不可见。 -->
<canvas style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position:fixed;left:100%;" id="picCanvas" type="2d"></canvas>
2.js代码:
//获取原图片信息
  wx.getImageInfo({
    src: path,
    success: function (res) {
      let canvasRatio = 1.1;
      let picWidth = res.width //图片原始长宽
      let picHeight = res.height
      while (picWidth > 400 || picHeight > 400) { // 保证宽高在400以内
        picWidth = Math.trunc(res.width / canvasRatio)
        picHeight = Math.trunc(res.height / canvasRatio)
        canvasRatio = canvasRatio + 0.1;
      }

      const query = wx.createSelectorQuery()
      query.select('#picCanvas').fields({
        node: true,
        size: true
      }).exec((res) => {
        try {
          const canvas = res[0].node
          const ctx = canvas.getContext('2d')
        
          let dpr = wx.getSystemInfoSync().pixelRatio
          //这里是设置css样式的宽高。
          //属性宽高是css样式宽高的dpr倍,兼容不同机型,避免绘制的内容模糊。
          that.setData({
            canvasWidth: picWidth / dpr,
            canvasHeight: picHeight / dpr
          })
          canvas.width = picWidth
          canvas.height = picHeight
            
          const img = canvas.createImage()
          img.src = path
          img.onload = () => {
            ctx.drawImage(img, 0, 0, picWidth, picHeight); //先画出图片
            //延迟600ms,避免部分机型未绘制出图片内容就执行保存操作,导致最终的图片是块白色画板。
            setTimeout(() => {
              wx.canvasToTempFilePath({
                fileType: "jpg",
                canvas: canvas,
                destWidth: picWidth,
                destHeight: picHeight,
                success: function (res) {
                  var tempFilePath = res.tempFilePath//结果路径
                }
              }, that)
            }, 600)
          }

        } catch (e) {
            //异常后的操作
        }
      })
    }
  })

一些避免踩坑的关键点都在代码注释里。

此文完毕。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值