我们知道微信小程序的转发时的封面图片比例固定为 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() 下载图片并同时获取图片的宽高
来源: http://www.jianshu.com/p/12fdfb152906