在微信小程序中分享,官网只提供分享给好友和群聊的能力,未提供分享到朋友圈的api。因此小程序分享到朋友圈通常做法就是利用canvas生成一张动态海报,上面贴一个小程序码图片,分享到朋友圈,长按识别小程序码进入小程序,以达到在朋友圈推广小程序的功能。
初始化canvas
1.在.wxml中 创建一个canvas,?canvasWidth ?和?canvasWidth ?分别为创建的canvas的宽高。
比如我们需要保存的海报尺寸为750px * 1350px; 我们就可以设置canvasWidth = 750;canvasWidth = 1350;这样导出来的图片比较清晰。
<view class="canvas-box">
<canvas canvas-id="canvas" class="canvas" style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;"></canvas>
<view>
2.在小程序中canvas层级最高。因此我们需要隐藏canvas,在窗口中不可见。
.canvas-box{
position: fixed;
top: 1000px;
left: z-index: -10;
}
- 在js中获得canvas上下文
const ctx = wx.createCanvasContext('canvas');
绘制图片
小程序绘制图片的api比较简单,一般可直接使用下面的方式
;
const imgX = 0;
const imgY = // 绘制图片在canvas中起点Y坐标
const imgWidth = 0;
const imgHeight = 0;
ctx.drawImage(img,imgX,imgY,canvasWidth,canvasHeight);
本地图片
小程序绘制本地图片可直接使用,例如上面的?/assets/images/bg.png' ?可直接绘制到canvas上面。
网络图片
小程序不能直接绘制网络图片到canvas中。
1.需要通过?wx.getImageInfo ?获取图片信息或?wx.downloadFile ?下载到本地。
2.获取图片信息。网络图片需先配置download域名才能生效。如果需要绘制微信用户头像,也需要将腾讯的域名加入到白名单。
这里使用wx.getImageInfo,在页面初始化的时候就请求所有需要绘制到canvas的网络图片.
绘制文字
ctx.setFontSize(30);
ctx.setFillStyle("#E1E6F0");
const text = '我是文字';
const textX = 0;
const textY = 0;
ctx.fillText(text,textStartX,textY);
绘制文字和图片有一个小区别需要注意一下,起始的x,y坐标不一致。
绘制图片的x,y坐标是从图片的?左上角 ?开始计算位置的。
绘制文字的x,y坐标是从文字的?右下角 ?开始计算位置的。
文字自动换行
ctx.measureText() ?能够获取canvas中文字的宽度,可通过此方法手动给文字换行
/*
* params
* @text 需要绘制的文本字符
* @startX 第一行文本的起始X坐标
* @startY 第一行文本的起始Y坐标
* @lineHeight 文本行高
* @MAX_WIDTH 单行文字最大宽度,超过临界值自动换行
*
* return rowLength 返回绘制文本的行数
* */
function drawText(text,startX,startY,lineHeight,MAX_WIDTH) {
let allAtr = text.split('');
let rowArr = [];
let rowStrArr = [];
for (let i = 0; i < allAtr.length; i++) {
const currentStr = allAtr[i];
rowStrArr.push(currentStr);
const rowStr = rowStrArr.join(if (ctx.measureText(rowStr).width &; MAX_WIDTH) {
rowStrArr.pop();
rowArr.push(rowStrArr.''));
rowStrArr = [currentStr];
continue;
}
if (i === allAtr.length - 1) {
rowArr.push(rowStr);
}
}
0; i < rowArr.length; i++) {
ctx.fillText(rowArr[i],startY + i * lineHeight);
}
return rowArr.length;
}
drawText()?函数主要的作用就是绘制传入的文本,使用?ctx.measureText() ?判断单行文字的宽度是否超过单行最大宽度,如果超过就将ctx绘制文本的startY坐标设置为当前startY+文本行高,实现切换到下一行的效果
canvas高度动态设置
由于项目中生成的海报图片高度随内容变化,导致不同的内容生成的海报高度不一致,所以这边只需要将canvas的高度放在data中,然后根据不同的内容动态计算最终海报的高度,然后设置data中canvas的高度即刻。
下面是项目中的实际效果,在这里,海报由三个部分组成,头部,内容,底部。其中头部和底部高度固定,中间的内容高度由后台返回的书籍数量决定,其中可能需要换行的就是书籍的名称和副标题。
这里简单的将每一本书作为一块区域,高度固定,因此?内容区域的高度 = 书籍数量 * 书籍高度 ,通过此方法简单计算出中间内容区的高度,然后动态设置canvas的高度。
源码
https://github.com/zhaosheng808/canvasPoster
提供简单的微信小程序测试号demo,包含请求用户保存canvas图片的授权逻辑。
测试号需要将不校验合法域名打开,不然无法下微信头像和外部图片。正式号需要在微信公众平台配置下载域名
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|