微信小程序：利用canvas缩小图片

最新推荐文章于 2025-06-07 10:24:25 发布

vonvon_chris

最新推荐文章于 2025-06-07 10:24:25 发布

阅读量1.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：微信图片 canvas

本文链接：https://blog.youkuaiyun.com/Akony/article/details/78815544

小程序专栏收录该内容

6 篇文章

订阅专栏

微信小程序中，为了提高接口响应速度和避免大图片处理，采用canvas进行图片压缩。通过canvas的drawImage方法重新设定图片尺寸，再利用canvasToTempFilePath方法将压缩后的图片保存，从而实现图片的高效压缩并展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能分两部分：展示、提交
一期的时候，用户预览图片，直接提交到后台。但是发现如果图片太大，还要进行二次处理，还会降低接口相应速度等原因。所以要对图片进行压缩。

压缩原理：选择图片后，利用canvas的drawImage方法重新定义图片大小，再利用canvasToTempFilePath方法下载到缩小后图片。

// 利用绝对定位 隐藏canvas
<canvas canvas-id="photo_canvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position: absolute;left:-300px;top:-300px;"></canvas>

wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      success: function (photo) {
        wx.getImageInfo({
          src: photo.tempFilePaths[0],
          success: function(res){
            var ctx = wx.createCanvasContext('photo_canvas');
            var ratio = 2;
            var canvasWidth = res.width
            var canvasHeight = res.height;
            // 保证宽高均在200以内
            while (canvasWidth > 200 || canvasHeight > 200){
              //比例取整
              canvasWidth = Math.trunc(res.width / ratio)
              canvasHeight = Math.trunc(res.height / ratio)
              ratio++;
            }
            _this.setData({
              canvasWidth: canvasWidth,
              canvasHeight: canvasHeight
            })//设置canvas尺寸
            ctx.drawImage(photo.tempFilePaths[0], 0, 0, canvasWidth, canvasHeight)
            ctx.draw()
            //下载canvas图片
            setTimeout(function(){
              wx.canvasToTempFilePath({
                canvasId: 'photo_canvas',
                success: function (res) {
                  console.log(res.tempFilePath)
                },
                fail: function (error) {
                  console.log(error)
                }
              })
            },100)
          },
          fail: function(error){
            console.log(error)
          }
        })

      },
      error: function (res) {
        console.log(res);
      }
    })