微信小程序如何裁剪图片作为转发封面

我们知道微信小程序的转发时的封面图片比例固定为5:4，具体内容详见小程序开发文档：

字段	说明	默认值	最低版本
title	转发标题	当前小程序名称
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。	使用默认截图	1.5.0

但是，在实际开发时我们有时需要将某张动态请求的网络图片作为转发封面图（比如文章封面），而这张图片又往往不符合 5:4 的比例要求。这时，如果我们直接将这张图片作为封面图其实也是可以的，只不过将长宽比大于 5:4 作为转发封面时，封面下可能会留有部分空白。

我们可以直接以简书为例，简书目前分享文章到微信时是以小程序的方式分享，而其分享封面也正是取自该文章的封面，所以，如果我们从小程序中转发可能会看到类似下图的转发封面图：

可以看到，封面图下面存在大块空白，如果图片长宽比例更大，那么下面的空白也将更大。

因此，为了更加美观，我们必须将图片按照 5:4 比例进行适当地裁剪，而我写本文的目的也正是如此。

1. 创建Canvas画布

前端要裁剪图片，我们首先就要想到用Canvas，写H5如此，微信小程序当然也是如此。

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

我们要用到的canvas当然不能直接在页面中显示，所以可以使用负定位值的方式将其隐藏。

2. 下载网络图片

我们可以使用wx.downloadFile()来下载网络图片，也可以使用wx.getImageInfo()，因为我们这里需要获取到图片的宽高，所以这里就要用到wx.getImageInfo()来进行图片的下载。

wx.getImageInfo({
      src: "",  // 这里填写网络图片路径 
      success: (res) => {
        // 这个是我封装的裁剪图片方法（下面将会说到）
        clipImage(res.path, res.width, res.height, (img) => {
          console.log(img);  // img为最终裁剪后生成的图片路径，我们可以用来做为转发封面图
        }); 
      }
});

3. 裁剪图片并导出

以下是我封装的专门用于裁剪图片比例大于 5:4 的图片，裁剪方式是截取图片中间部分（当然你也可以试着写下裁剪小于 5:4 的图片）：

/* 裁剪封面，
   src为本地图片路径或临时文件路径，
   imgW为原图宽度，
   imgH为原图高度，
   cb为裁剪成功后的回调函数
*/
const clipImage = (src, imgW, imgH, cb) => {  

  // ‘canvas’为前面创建的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画布进行图片裁剪
② 裁剪网络图片前，必须使用wx.getImageInfo()下载图片并同时获取图片的宽高