小程序转发图片尺寸如何设置

本篇内容介绍了“小程序转发图片尺寸如何设置”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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:4canvasW = 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);})}

“小程序转发图片尺寸如何设置”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！