一、目的：
生成包含二维码的海报，可扫码进入
二、核心步骤
1、适配（根据比例算出宽高）
wx.getSystemInfo({
success: res => {
// console.log(res,'44');
this.setData({
windowWidth: res.windowWidth,
windowHeight: res.windowHeight,
});
this.setData({
// 屏幕宽度 375px = 750rpx，1px=2rpx
// 1px = （750 / 屏幕宽度）rpx；
// 1rpx = （屏幕宽度 / 750）px;
ratio: 750 / this.data.windowWidth
});
}
});
2、利用canves绘图
1.先有一个<canvas canvas-id="myCanvas" style='background:#fff;'></canvas>
2. let ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('#a10000')
ctx.fill()
// 绘制矩形
ctx.setFillStyle('#fff')
ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight-119)
// 绘制图片
let canvas = '/images/img_img_background.png';
let imgCanvasWidth = 600 / this.data.ratio;
ctx.drawImage(canvas, 0, 0, imgCanvasWidth, 240 / this.data.ratio)
// 绘制图片
let icon = '/images/icon_time_copy.png';
ctx.drawImage(icon, 40 / this.data.ratio, 264 / this.data.ratio, 32 / this.data.ratio, 32 / this.data.ratio)
// 时间
let feedAt = 'xxxx'
// 设置字号
ctx.setFontSize(12)
//设置填充图样和颜色
ctx.setFillStyle('#B2B4C1')
// 绘制填充文字（ 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) ）
ctx.fillText(feedAt, 82 / this.data.ratio, 288 / this.data.ratio)
// title
let title = 'xxxx'
ctx.setFontSize(17)
ctx.setFillStyle('#333')
// 内容
let context = 'xxx'
保存图片：
wx.saveImageToPhotosAlbum({
url: that.data.prurl,
filePath: that.data.prurl,
success(res) {
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
that.data.shareText = '已保存到了相册，快去分享吧'
}
}
})
}
})
这样子就可以把canves保存成图片了
3.扫描二维码进入对应的分享页面（这里用的是方案A）
var qrcode = app.globalData.base_url + "v1/wechat/qrcode?autoColor=false&isHyaline=true&path=xxxxx?width=280&id=" + id + "";
注：这个path后面的其实就是你分享后打开进入的页面（onLoad）时候
网友评论