小程序图片压缩

在开发小程序时，需要上传图片到服务器中，并且限制图片大小不能超过100kb，所以在选择图片或者拍照之后进行图片压缩再上传到服务器中。那么压缩图片有以下几种方式：

使用wx.chooseImage

wx.chooseImage选择图片或者调用相机拍照的时候，设置为缩略图，自动压缩。
但是这种方式不能设置具体压缩多少，就像要求图片不能大于100kb，这种时候wx.chooseImage压缩下来不一定是小于100kb。

通过canvas压缩图片

思路：
1、读取图片的大小【 wx.getFileInfo（）读取文件大小的相关信息】；
2、若是图片不符合我们的要求，通过canvas对图片进行编辑压缩。【wx.getImageInfo（）获取图片的尺寸相关信息】

canvas压缩图片的步骤：

1、将我们拍照的图片通过CanvasContext.drawImage绘制到画布上（canvas）
2、把之前绘图的上下文描述通过CanvasContext.draw画到canvas上。
3、在draw()的回调使用wx.canvasToTempFilePath导出图片，再次读取该图片的大小，判断是否符合我们的要求。

wxml：

<camera device-position="front" flash="off" binderror="error" class="photo" wx:if="{{hide}}"></camera>
  <view class="btn-area" wx:if="{{hide}}">
    <button type="primary" bindtap="takePhoto">拍照</button>
  </view>
  <view class="preview">
    <!-- <view class="preview-tips">预览</view> -->
    <image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
  </view>

  </view>

<canvas canvas-id='pressCanvas' class='press-canvas' style='width: {{ canvasWidth }}px; height: {{ canvasHeight }}px;position:absolute;left:{{-canvasWidth}}px;bottom:{{-canvasHeight}}px' wx:if="{{canvas}}"></canvas> 

压缩图片的方法：

  //图片压缩
  compressImage(imgpath) {
    const that = this;
    wx.showLoading({
      title: '压缩中...',
      mask: true,
    })
    wx.getFileInfo({
      filePath: imgpath,
      success: (result) => {
        console.log(result)
        console.log("图片压缩前＝" + result.size / 1024 + "kByte");
        if (result.size / 1024 > 90) {
          wx.getImageInfo({
            src: imgpath,
            success(rr) {
              var ctx = wx.createCanvasContext('pressCanvas');
              var ratio = 1;
              var canvasWidth = rr.width
              var canvasHeight = rr.height;
              //设置canvas尺寸
              that.setData({
                canvasWidth: canvasWidth,
                canvasHeight: canvasHeight
              });
              ctx.drawImage(imgpath, 0, 0,300, 300); //将图片填充在canvas上
              ctx.draw(false, setTimeout(function() {
                wx.canvasToTempFilePath({
                  canvasId: 'pressCanvas',
                  
                  destWidth:300,  //设置导出目标图片宽度
                  destHeight:300, //设置导出目标图片的高度
                  fileType: 'jpg',
                  quality: 0.6,
                  success: function success(path) {
                    wx.getFileInfo({
                      filePath: path.tempFilePath,
                      success(data) {
                        console.log("压缩后图片大小为＝＝" + data.size / 1024 + "kb");
                        if (data.size / 1024 > 80) {
                          console.log("图片太大了")
                          that.compressImage(path.tempFilePath)
                        } else {
                          wx.hideLoading();
                          that.setData({
                            hide: false,
                            src: path.tempFilePath,
                            canvas: true
                          })
                          console.log("图片符合要求")
                          
                        }
                      }
                    })
                  },
                  fail: function fail(e) {}
                });
              }, 1000));
            }
          })
        } else {
          wx.hideLoading();
          that.setData({
            hide: false,
            src: imgpath,
            canvas: true
          })
          
          wx.showToast({
            title: '图片小于100KB',
          })
        }
      },
      fail: (res) => {},
      complete: (res) => {},
    })
  }

拍照按钮的点击事件：

  // 拍照
  takePhoto() {
    const that = this;
    // 从相册选择图片或者使用相机拍照后设置图片为缩略图
    // wx.chooseImage({
    //   count: 1,
    //   sizeType: ['original', 'compressed'],
    //   sourceType: ['album', 'camera'],
    //   success(res) {
    //     that.transformBase(res.tempFilePaths[0])
    //     wx.getFileInfo({
    //       filePath: res.tempFilePaths[0],
    //       success(data) {
    //         console.log("图片大小＝" + data.size / 1024 + "kb")
    //       }
    //     })
    //     that.setData({
    //       hide: false,
    //       src: res.tempFilePaths
    //     })
    //   }
    // })
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log(res)
        that.compressImage(res.tempImagePath);
        // wx.getFileInfo({
        //   filePath: res.tempImagePath,
        //   // digestAlgorithm: '',
        //   success: function(option) {
        //     console.log("压缩前图片大小为：" + option.size / 1024 + "kb");

        //     if (option.size / 1024 > 90) {
        //       // 压缩
        //       wx.compressImage({
        //         src: res.tempImagePath, // 图片路径
        //         quality: 80, // 压缩质量
        //         success: (e) => {
        //           console.log(e)
        //           that.setData({
        //             hide: false,
        //             src: e.tempFilePath,
        //             canvas: true
        //           })
        //           
        //           wx.getFileInfo({
        //             filePath: e.tempFilePath,
        //             // digestAlgorithm: '',
        //             success: function(option) {
        //               console.log("压缩后图片大小为：" + option.size / 1024 + "kb")
        //             },
        //             fail: function(error) {
        //               console.log(error)
        //             },
        //           })
        //         }
        //       })
        //     } else {
        //       console.log("图片符合要求")
        //       that.setData({
        //         hide: false,
        //         src: res.tempImagePath,
        //         canvas: true
        //       })
        //       that.transformBase(res.tempImagePath);
        //     }
        //   },
        //   fail: function(error) {
        //     console.log(error)
        //   },
        // })


      }
    })
  },

通过wx.compressImage来压缩图片

如以上代码this.ctx.takePhoto中的注释部分，就不需要使用canvas了，拍照好了之后直接读取图片的大小，判断是否符合要求，否则通过wx.compressImage进行压缩。