小程序转发图片尺寸设置,对话框微信小程序图片尺寸

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

我们知道微信小程序的转发时的封面图片比例固定为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. }