每次寫一次技術(shù)文檔的記錄际插，已經(jīng)養(yǎng)成習慣必定開頭廢話一下了哈哈哼审。

嗯谐腰，剛?cè)胄袝r每次做到上傳圖片孕豹，都是一次很掙扎的一件事情。漸漸的也就習慣了怔蚌，發(fā)現(xiàn)其實挺簡單的巩步，簡單說一下為什么需要壓縮圖片吧：

其實最直面的無非兩三點。

1. 圖片過大
2. 上傳時間慢
3. 占服務(wù)器資源桦踊，等等...

順便簡單說一下我的解決辦法：

h5端：壓縮圖片我一般會選用localResizeIMG.js 椅野。前端壓縮圖片起來簡單粗暴（圖片過大的話會有明顯的搓頓感）

公眾號:記住微信公眾號的jdk引用后有微信官方提供的壓縮圖片的方法

重點來了，小程序壓縮：
小程序官方對上傳圖片這塊本身已經(jīng)提供了一個api：chooseImage(compressed)
因為我的手機是安卓手機籍胯，上傳的圖片就是原圖竟闪，沒被壓縮，后經(jīng)查找資料說這個api只有ios支持壓縮杖狼，所以強大的安卓黨就得來壓縮圖片啦~炼蛤！

        wx.chooseImage({
          count: 1,                                                    //圖片張數(shù)
          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
              }
            })
          }
        })

這是微信原生的方法蝶涩。
下面是我經(jīng)測試寫的一個方法（先屢一下思路）：
1.要實現(xiàn)圖片壓縮的話理朋，首頁會想到canvas，所以在小程序頁面必須創(chuàng)建一個canvas標簽绿聘。
<canvas canvas-id='photo_canvas' style='width:688rpx;height:{{canvas_h}}px' class='myCanvas'></canvas>
因為我的壓縮比例直接按照688rpx壓縮的嗽上，所以寬度寫死了。（canvas壓縮圖片如果不給定寬高熄攘，圖片會變形）

這里我重點聲明一下canvasToTempFilePath方法里面fileType:"jpg"兽愤；如果不設(shè)置這段，會默認上傳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');
        //設(shè)置canvas尺寸
        console.log(res.height)
        console.log(res.width)
        var towidth = 344;           //按寬度344px的比例壓縮
        var toheight = Math.trunc(344*res.height/res.width);        //根據(jù)圖片比例換算出圖片高度
        _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)
        })
      }
      })
  }
})

測試原圖片

測試原圖片

壓縮后的圖片

壓縮后的圖片