我們知道微信小程序的轉發(fā)時的封面圖片比例固定為5:4芳撒，具體內容詳見小程序開發(fā)文檔：

但是，在實際開發(fā)時我們有時需要將某張動態(tài)請求的網(wǎng)絡圖片作為轉發(fā)封面圖（比如文章封面）亦镶，而這張圖片又往往不符合 5:4 的比例要求日月。這時，如果我們直接將這張圖片作為封面圖其實也是可以的缤骨，只不過將長寬比大于 5:4 作為轉發(fā)封面時爱咬，封面下可能會留有部分空白。

我們可以直接以簡書為例绊起，簡書小程序中文章的轉發(fā)封面是取自該文章的封面精拟，所以，如果我們從小程序中轉發(fā)可能會看到類似下圖的轉發(fā)封面圖：

可以看到虱歪，封面圖下面存在大塊空白蜂绎，如果圖片長寬比例更大，那么下面的空白也將更大笋鄙。

因此师枣，為了更加美觀，我們必須將圖片按照 5:4 比例進行適當?shù)夭眉粝袈洌覍懕疚牡哪康囊舱侨绱恕?/p>

1. 創(chuàng)建Canvas畫布

前端要裁剪圖片践美，我們首先就要想到用Canvas洗贰，寫H5如此，微信小程序當然也是如此拨脉。

<canvas style="position: absolute; top: -1000px; left: -1000px; width: 640px; height: 640px; background: #000" canvas-id="canvas"></canvas>

我們要用到的canvas當然不能直接在頁面中顯示哆姻，所以可以使用負定位值的方式將其隱藏。

2. 下載網(wǎng)絡圖片

我們可以使用wx.downloadFile()來下載網(wǎng)絡圖片玫膀，也可以使用wx.getImageInfo()矛缨，因為我們這里需要獲取到圖片的寬高，所以這里就要用到wx.getImageInfo()來進行圖片的下載帖旨。

wx.getImageInfo({
      src: "",  // 這里填寫網(wǎng)絡圖片路徑 
      success: (res) => {
        // 這個是我封裝的裁剪圖片方法（下面將會說到）
        clipImage(res.path, res.width, res.height, (img) => {
          console.log(img);  // img為最終裁剪后生成的圖片路徑箕昭，我們可以用來做為轉發(fā)封面圖
        }); 
      }
});

3. 裁剪圖片并導出

以下是我封裝的專門用于裁剪圖片比例大于 5:4 的圖片，裁剪方式是截取圖片中間部分（當然你也可以試著寫下裁剪小于 5:4 的圖片）：

/* 裁剪封面解阅，
   src為本地圖片路徑或臨時文件路徑落竹，
   imgW為原圖寬度，
   imgH為原圖高度货抄，
   cb為裁剪成功后的回調函數(shù)
*/
const clipImage = (src, imgW, imgH, cb) => {  

  // ‘canvas’為前面創(chuàng)建的canvas標簽的canvas-id屬性值
  let ctx = wx.createCanvasContext('canvas');  
  let canvasW = 640, canvasH = imgH;

  if (imgW / imgH > 5 / 4) { // 長寬比大于5:4
    canvasW = imgH * 5 / 4;
  }

  // 將圖片繪制到畫布
  ctx.drawImage(src, (imgW - canvasW) / 2, 0, canvasW, canvasH, 0, 0, canvasW, canvasH) 
// draw()必須要用到述召，并且需要在繪制成功后導出圖片
 ctx.draw(false, () => {
    setTimeout(() => {
      //  導出圖片
      wx.canvasToTempFilePath({
        width: canvasW,
        height: canvasH,
        destWidth: canvasW,
        destHeight: canvasH,
        canvasId: 'canvas',
        fileType: 'jpg',
        success: (res) => {
          // res.tempFilePath為導出的圖片路徑
          typeof cb == 'function' && cb(res.tempFilePath);
        }
      })
    }, 1000);
  })
}

本文重點總結

① 使用Canvas畫布進行圖片裁剪
② 裁剪網(wǎng)絡圖片前，必須使用wx.getImageInfo()下載圖片并同時獲取圖片的寬高