微信小程序压缩上传图片

简介微信小程序压缩上传图片，可以选择相册照片或者拍照后压缩上传图片

微信上传图片后，将图片按比例缩放后，绘制在canvas画布上面，即可实现上传图片压缩效果，具体代码如下:

1.wxml文件中：

<canvas id="attendCanvasId" canvas-id="attendCanvasId" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position:fixed;left:-1000px;top:-2000px;"></canvas>

2.微信小程序js代码：

//麦子笔记 小程序 上传图片压缩demo
Page({
  /**
   * 页面的初始数据
   */
  data: {
    canvasWidth:0,//初始化画布宽度
    canvasHeight:0,//初始化画布高度
  },

  //选择图片
  chooseImage(){
    wx.chooseImage({
      count:1,//演示限制只允许选择一张图片
      sizeType: ['compressed'], //我这里指定上传压缩图
      sourceType: ['album','camera'], //允许从相册选择上传、拍照上传
      success: (res) => {
        console.log(res)
        let tempFiles = res.tempFiles;

        //进行压缩
        this.imageShrink(tempFiles[0]['path']);
      }
    })
  },

  //压缩图片
  imageShrink(src_img){
    let ctx = '';

    //#attendCanvasId是画布canvas的id
    wx.createSelectorQuery()
    .select("#attendCanvasId")
    .context((res)=>{
      ctx = res.context;
      //获取图片信息，做这一步
      wx.getImageInfo({
        src: src_img,
        success: (ret)=>{
          let ratio = 2;//压缩比，值越高压缩的越小
          let canvasWidth = ret.width; //图片原始宽度
          let canvasHeight = ret.height;//图片原始高度

          //保证图片宽高在400以内
          if (canvasWidth > 400 || canvasHeight > 400){
            canvasWidth = Math.trunc(ret.width / ratio)
            canvasHeight = Math.trunc(ret.height / ratio)
          }

          //赋值画布的宽度、高度
          this.setData({
            canvasWidth:canvasWidth,
            canvasHeight:canvasHeight
          });

          //在画布绘制图片
          ctx.drawImage(src_img, 0, 0,canvasWidth,canvasHeight);
          ctx.draw();

          //留一定的时间绘制canvas
          setTimeout(()=>{
            wx.canvasToTempFilePath({
              canvasId: 'attendCanvasId',
              fileType:'jpg',//上传图片格式，jpg比较小
              success:(result)=> {
                //调用上传图片方法
                this.uploadimage(result.tempFilePath);
              },
              error:(err)=>{},
              complete: (e)=>{}
            });
          },300);
        }
      })
    }).exec();
  },

  //上传图片,src_img表示上传图片地址
  uploadimage(src_img){
    //开始上传以及上传返回值
    wx.uploadFile({
      url: "接口地址，如https://www.XXX.com/XXX",
      filePath: src_img,//图片地址
      name: '上传图片接口的参数名称',
      formData: {//请求的额外参数
        'user': 'test'
      },
      success (res){
        let result = JSON.parse(res.data);//返回的结果是String类型，json转换

      }
    });
  }
})

上述代码如果遇到问题，欢迎大家评论区留言指正。