小程序生成二维码并且保存分享

效果图

hidden 是用来隐藏显示图层的 prurl是生成出来的图片临时路径

data: {
prurl: '',
hidden: true
}


核心JS代码

getQr: function () {
var that = this
wx.showLoading({
title: '生成二维码中...',
})
if (that.data.prurl != ''){
that.setData({
hidden: false
})
wx.hideLoading()
}else{
wx.request({
url: app.globalData.url + '/wx/getQr/' + app.globalData.openId,
header: {
'content-type': 'application/json'
},
success: function (res) {
// app.globalData.userQr = res.data;
that.setData({
userQr: res.data
});
}, complete: () => {
wx.downloadFile({
url: app.globalData.userInfo.avatarUrl,
success: function (res1) {
//缓存头像图片
that.setData({
portrait_temp: res1.tempFilePath
})
}, complete: () => {
that.drawImage()
wx.hideLoading()
}
})
}
})
}
// wx.navigateTo({
// url: '../wxqr/wxqr'
// })
}, drawImage: function () {
var that = this
const fsm = wx.getFileSystemManager();
//传入二维码base64
base64src(this.data.userQr).then(
function (data) {
const ctx = wx.createCanvasContext('img-canvas')
// 底图
ctx.drawImage('/image/tg.png', 0, 40, 307, 441)
// 文字
ctx.setTextAlign('center') // 文字居中
ctx.setFillStyle('#000000') // 文字颜色：黑色
ctx.setFontSize(18) // 文字字号：22px
ctx.fillText(that.data.user.name, 307 / 2, 120)
// 文字
ctx.setTextAlign('center') // 文字居中
ctx.setFillStyle('#D4D4D4') // 文字颜色：黑色
ctx.setFontSize(14) // 文字字号：22px
ctx.fillText('长按扫描小程序', 307 / 2, 400)
// 小程序码
const qrImgSize = 180
//第一个数字是左边距 第二个参数上边距
ctx.drawImage(data, (300 - qrImgSize) / 2, 180, qrImgSize, qrImgSize)
//画圆的代码需要放在最后不然会导致其他代码无法执行
// 下面是先定位要开个圆形的位置，160 和 45 分别就是圆的圆心的 x 坐标和 y 坐标，40 是半径，后面的两个参数就是起始和结束，这样就能画好一个圆了
ctx.arc(155, 45, 40, 0, 2 * Math.PI);
ctx.closePath();
// 下面就裁剪出一个圆形了
ctx.clip();
//头像
ctx.drawImage(that.data.portrait_temp, 115, 5, 80, 80)
ctx.restore();
ctx.stroke()
ctx.draw(false, function () {
//生成分享图
wx.canvasToTempFilePath({
canvasId: 'img-canvas',
success: function (res) {
console.info(res.tempFilePath)
that.setData({
prurl: res.tempFilePath,
hidden: false
})
}
})
})
}
)
},
// 保存图片到本地
saveCanvas: function () {
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.prurl,
success(res) {
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
that.closeCanvas()
}
}
})
}
})
}, closeCanvas:function(){
/* 该隐藏的隐藏 */
this.setData({
hidden: true
})
}


上面方法调用的一个base64的工具，如果小程序二维码可以有远程路径地址的话可以不需要。

const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src';
const base64src = function (base64data) {
return new Promise((resolve, reject) => {
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
if (!format) {
reject(new Error('ERROR_BASE64SRC_PARSE'));
}
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
const buffer = wx.base64ToArrayBuffer(bodyData);
fsm.writeFile({
filePath,
data: buffer,
encoding: 'binary',
success() {
resolve(filePath);
},
fail() {
reject(new Error('ERROR_BASE64SRC_WRITE'));
},
});
});
};
export default base64src;


html代码