小程序压缩图片（canvas）

每次写一次技术文档的记录，已经养成习惯必定开头废话一下了哈哈。

嗯，刚入行时每次做到上传图片，都是一次很挣扎的一件事情。渐渐的也就习惯了，发现其实挺简单的，简单说一下为什么需要压缩图片吧：

其实最直面的无非两三点。

1. 图片过大
2. 上传时间慢
3. 占服务器资源，等等...

顺便简单说一下我的解决办法：

h5端：压缩图片我一般会选用localResizeIMG.js 。前端压缩图片起来简单粗暴（图片过大的话会有明显的搓顿感）

公众号:记住微信公众号的jdk引用后有微信官方提供的压缩图片的方法

重点来了，小程序压缩：
小程序官方对上传图片这块本身已经提供了一个api：chooseImage(compressed)
因为我的手机是安卓手机，上传的图片就是原图，没被压缩，后经查找资料说这个api只有ios支持压缩，所以强大的安卓党就得来压缩图片啦~！

        wx.chooseImage({
          count: 1,                                                    //图片张数
          sizeType: ['original', 'compressed'],                        //  original原图,compressed    压缩图
          success (res) {
            const tempFilePaths = res.tempFilePaths
            wx.uploadFile({
              url: 'https://example.weixin.qq.com/upload',             //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],
              name: 'file',
              formData: {'user': 'test' },
              success (res){
                const data = res.data
              }
            })
          }
        })

这是微信原生的方法。
下面是我经测试写的一个方法（先屡一下思路）：
1.要实现图片压缩的话，首页会想到canvas，所以在小程序页面必须创建一个canvas标签。
<canvas canvas-id='photo_canvas' style='width:688rpx;height:{{canvas_h}}px' class='myCanvas'></canvas>
因为我的压缩比例直接按照688rpx压缩的，所以宽度写死了。（canvas压缩图片如果不给定宽高，图片会变形）

这里我重点声明一下canvasToTempFilePath方法里面fileType:"jpg"；如果不设置这段，会默认上传png的格式，简单来说，如果你上传一个jpg120k的图片，可能会返回一个png140k的图片大小

wx.chooseImage({
  count: 1,
  sizeType: ['compressed'],
  success: function (photo) {
    console.log(photo.tempFilePaths[0])
    wx.getImageInfo({
      src: photo.tempFilePaths[0],
      success: function (res) {
        var ctx = wx.createCanvasContext('photo_canvas');
        //设置canvas尺寸
        console.log(res.height)
        console.log(res.width)
        var towidth = 344;           //按宽度344px的比例压缩
        var toheight = Math.trunc(344*res.height/res.width);        //根据图片比例换算出图片高度
        _this.setData({
          canvas_h: toheight
        })
        ctx.drawImage(photo.tempFilePaths[0], 0, 0, res.width, res.height, 0, 0, towidth, toheight)
        ctx.draw(false, function () {
          wx.canvasToTempFilePath({
            canvasId: 'photo_canvas',
            fileType:"jpg",
            success: function (res) {
              console.log(res.tempFilePath)
              wx.uploadFile({
                url: 'http://127.0.0.1:8000/sj/upload/',
                filePath: res.tempFilePath,
                name: 'img',
                success: function (res) {
                  console.log(res)
                }
              })
            }
          }, this)
        })
      }
      })
  }
})

测试原图片

测试原图片

压缩后的图片

压缩后的图片