微信小程序压缩图片并上传到服务器（拿去即用）

Posted 2022-03-19 zouwangblog

这里注意一下，图片压缩后的宽度是画布宽度的一半

canvasToTempFilePath 创建画布的时候会有一定的时间延迟容易失败，这里加setTimeout来缓冲一下

这是单张图片压缩，多张的压缩暂时还没有成功，保存到服务器上后是空白的，如有大神望指点一二（＞人＜；）
<canvas canvas-id=‘photo_canvas‘ style=‘width:1000rpx;height:canvas_hpx‘ class=‘myCanvas‘></canvas>

/**压缩图片 */
  compressionImage(tempFilePaths, params) 
    let that = this
    wx.getImageInfo(
      src: tempFilePaths[0],
      success: function(res) 
        var ctx = wx.createCanvasContext('photo_canvas');
        //设置canvas尺寸
        var towidth = 500; //按宽度500px的比例压缩
        var toheight = Math.trunc(500 * res.height / res.width);
        that.setData(
          canvas_h: toheight
        )
        ctx.drawImage(tempFilePaths[0], 0, 0, res.width, res.height, 0, 0, towidth, toheight)
        that.createMap(ctx, params);
      
    )
  ,
  /**创建画布并上传图片 */
  createMap(ctx, params) 
    let that = this;
    ctx.draw(true, function() 
      wx.showLoading(
        title: '压缩中',
      )
      setTimeout(() => 
        wx.canvasToTempFilePath(
          canvasId: 'photo_canvas',
          fileType: "jpg",
          success: function(res) 
            wx.hideLoading();
            wx.uploadFile(
              url: app.globalData.baseUrl + '/wechat/want/addWant',
              filePath: res.tempFilePath,
              name: 'file',
              formData: 
                'parameters': JSON.stringify(params)
              ,
              success: function(res) 
                console.log("state:" + JSON.parse(res.data).state)
                if (JSON.parse(res.data).state === 1) 
                  wx.showToast(
                    title: '发布成功',
                    duration: 2000,
                    icon: "none",
                    success() 
                      setTimeout(function() 
                        wx.navigateBack(
                          delta: 1,
                        )
                      , 1000);
                    
                  )
                
              ,
              fail(res) 
                console.log("fail" + res)
              
            )
          ,
          fail(res) 
            if (res.errMsg === "canvasToTempFilePath:fail:create bitmap failed") 
              console.log("导出map失败")
            
          
        , this)
      , 200);
 
    )
  ,