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

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

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

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

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

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

1. 创建Canvas画布

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

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

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

2. 下载网络图片

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

wx.getImageInfo({
      success(res)=>{
        clipImagepath reswidthheightimg{
        }); 
});

3. 裁剪图片并导出

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

/* 裁剪封面，
   imgW为原图宽度，
   cb为裁剪成功后的回调函数
const clipImage =src imgW imgH cb{  

  let ctx  wxcreateCanvasContext('canvas'  

    canvasW *;

  ctxdrawImage- canvasW20 canvasH 
 ctxdraw(false(){
      //  导出图片
        width        destWidth        canvasId          typeof cb =='function'&&tempFilePath);

})
})

本文重点总结

②裁剪网络图片前，必须使用()下载图片并同时获取图片的宽高