需求：要求生成小程序二维码海报给新用户注册，分享好友和保存海报功能
思路：通过后台接口请求到带参的小程序二维码，再通过canvas合成一张海报，保存的时候通过
wx.canvasToTempFilePath和 wx.saveImageToPhotosAlbum保存；
代码：
wxml
<view class="vh100">
<nav-bar back="" title="我的二维码"></nav-bar>
<view class="qrCode">
<view class="code-box">
<image src="{{imagePath}}" show-menu-by-longpress="true" class="ewm-img"></image>
<view class="id-view">ID：{{userInfo.userId}}</view>
<canvas style="width:579rpx;height:650rpx;background: #fff;" class="canvas" show-menu-by-longpress="{{true}}" canvas-id="canvas-id"></canvas>
</view>
<view class="p">请向您的朋友出示二维码，您的朋友通过二维码扫描，注册成功即分享成功</view>
<view class="but-warp">
<view class="but-center">
<button class="but" open-type='share'>分享好友</button>
</view>
<view class="but-center jc-end">
<button class="but" bindtap="downloadewm">保存图片</button>
</view>
</view>
</view>
</view>
css
.vh100 {
width: 100%;
height: 100vh;
background: rgba(244, 244, 244, 1);
}
.qrCode {
width: 580rpx;
display: flex;
margin: 0 auto;
justify-content: center;
flex-direction: column;
}
.code-box {
margin-top: 101rpx;
background:rgba(255,255,255,1);
border-radius:14rpx 14rpx 0 0;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.ewm-img{
width: 440rpx;
height: 440rpx;
margin:70rpx 70rpx 0rpx 70rpx;
}
.id-view{
height:40rpx;
font-size:28rpx;
font-weight:bold;
color:rgba(51,51,51,1);
line-height:40rpx;
text-align: right;
padding: 30rpx 70rpx 70rpx 70rpx;
}
.canvas{
position: absolute;
left:-999999px;
top: -999999px;
background: #fff;
}
.p{
height:66rpx;
font-size:24rpx;
font-weight:500;
color:rgba(153,153,153,1);
line-height:33rpx;
background: #fff;
width: 442rpx;
padding: 0 70rpx 44rpx 70rpx;
}
.but-warp{
flex-direction: row;
display: flex;
margin-top: 60rpx
}
.but-center{
flex: 1;
}
.jc-end{
display: flex;
justify-content: flex-end
}
.but{
width:238rpx;
height:79rpx;
line-height: 79rpx;
text-align: center;
border-radius:40rpx;
js
// pages/qrCode/index.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
userId: '112313',
userInfo: {},
ratio:1,
imagePath: 'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_09b6296.png'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
userInfo: app.globalData.userInfo || {}
})
},
//生成二维码
createEwm(){
let _this = this;
const res = wx.getSystemInfoSync()
let ratio = 750/ res.windowWidth
var ctx = wx.createCanvasContext('canvas-id', this)
// 设置矩形边框
ctx.setStrokeStyle('#fff');
ctx.setFillStyle('#FFFFFF');
// 设置矩形宽高
ctx.strokeRect(0, 0, 579 * ratio, 620 / ratio);
wx.getImageInfo({
src: _this.data.imagePath,
success: (re) => {
ctx.save();
ctx.drawImage(re.path, 70 / ratio, 70 / ratio, 440 / ratio, 440 / ratio)
ctx.setFontSize(28 / ratio)
ctx.fillStyle = '#333333';
ctx.fillText('ID:' + this.data.userInfo.userId, 300 / ratio, 550 / ratio)
//调用draw()开始绘制
ctx.draw()
}
})
},
//点击保存到相册
downloadewm: function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
fileType:'jpg',
canvasId: 'canvas-id',
success(res) {
console.log(res.tempFilePath)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存成功',
icon:'none'
})
}
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.createEwm()
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title: 'Hi，给你安利一个超棒的直播电商平台！',
desc: '1元抢购，低价秒杀……多重优惠等着你，快来点我吧~',
path: '/pages/login/index?uId=' + this.data.userInfo.userId,
}
}
})
坑：
1.ctx.drawImage只支持本地图片，所以网络图片要通过wx.getImageInfo下载到本地缓存；getImageInfo不知道baes64的图片
2.刚开始是直接现在canvas来显示在页面的，后面发现真机上生成很慢，所以就用imgage来先布局，再通过position: absolute;
left:-999999px;
top: -999999px;
来隐藏canvas标签，切记不能用hidden来隐藏，hidden隐藏保存的时候wx.canvasToTempFilePath无法获取
至此完成功能，不喜勿喷！
