我们在分享一个微信小程序到微信群时
，，，
，会显示一个封面图
，，，
，这个封面图一般是由尺寸要求的
，，，
，若是不切合尺寸要求
，，，
，该怎样设置呢？？？？？下面是这篇对话框微信小程序图片尺寸。。。。

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

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

因此
，，，
，为了越发雅观
，，，
，我们必需将图片凭证 5:4 比例举行适外地裁剪
，，，
，而我写本文的目的也正是云云。。。。

1. 建设Canvas画布

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

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

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

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

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

3. 裁剪图片并导出

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

1. /* 裁剪封面
   ，，，
   ，
2. src为外地图片路径或暂时文件路径
   ，，，
   ，
3. imgW为原图宽度
   ，，，
   ，
4. imgH为原图高度
   ，，，
   ，
5. cb为裁剪乐成后的回调函数
6. */
7. const clipImage = (src, imgW, imgH, cb) => {
8.  
9. // ‘canvas’为前面建设的canvas标签的canvas-id属性值
10. let ctx = wx.createCanvasContext('canvas');
11. let canvasW = 640, canvasH = imgH;
12.  
13. if (imgW / imgH > 5 / 4) { // 长宽比大于5:4
14. canvasW = imgH * 5 / 4;
15. }
16.  
17. // 将图片绘制到画布
18. ctx.drawImage(src, (imgW - canvasW) / 2, 0, canvasW, canvasH, 0, 0, canvasW, canvasH)
19. // draw()必需要用到
    ，，，
    ，并且需要在绘制乐成后导出图片
20. ctx.draw(false, () => {
21. setTimeout(() => {
22. // 导出图片
23. wx.canvasToTempFilePath({
24. width: canvasW,
25. height: canvasH,
26. destWidth: canvasW,
27. destHeight: canvasH,
28. canvasId: 'canvas',
29. fileType: 'jpg',
30. success: (res) => {
31. // res.tempFilePath为导出的图片路径
32. typeof cb == 'function' && cb(res.tempFilePath);
33. }
34. })
35. }, 1000);
36. })
37. }