// pages/invitationDetails/poster/poster.js import QRCode from '../../../utils/weapp-qrcode.js' const app = getApp() Page({ /** * 页面的初始数据 */ data: { shareImage: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220811/%E4%BA%8C%E5%9B%BE/%E5%9B%BE%E7%89%87/%E9%82%80%E8%AF%B7%E6%B4%BB%E5%8A%A8%20%E5%A4%87%E4%BB%BD%202%402x.png", bgImage: '', qrcode_content: "" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ qrcode_content: getApp().invite_id }) console.log(this.data.qrcode_content,'options.qrcode_content'); this.setQrcode() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () {}, /** * 生成动态二维码 */ setQrcode() { new QRCode('myQrcode', { text: this.data.qrcode_content, width: 75, height: 75, padding: 0, // 生成二维码四周自动留边宽度,不传入默认为0 correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度 callback: (res) => { this.setData({ qrCode: res.path }) console.log(res, 'res'); // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去,看需求 } }) }, /** * 背景图转存本地(小程序drawImage不识别cdn图片) */ onSaveAlbum() { const that = this wx.downloadFile({ url: this.data.shareImage, success(res) { console.log(res.tempFilePath, 'res.tempFilePath'); that.setData({ bgImage: res.tempFilePath }) that.generateImage() } }) }, /** * 画图 */ generateImage() { const ctx = wx.createCanvasContext('myCanvas') ctx.drawImage(this.data.bgImage, 0, 0, 610, 1168) ctx.drawImage(this.data.qrCode, 230, 944, 150, 150) ctx.draw(true, () => { let that = this // 获取图片路径 wx.canvasToTempFilePath({ x: 0, y: 0, width: 610, height: 1168, destWidth: 610 * 2, destHeight: 1168 * 2, canvasId: 'myCanvas', success(res) { console.log(res, '图片'); that.setData({ pictureUrl: res.tempFilePath, }) that.saveImage() } }) }) }, /** * 保存到本地 */ saveImage() { wx.showToast({ title: '保存成功' }) wx.saveImageToPhotosAlbum({ filePath: this.data.pictureUrl, success: (res) => { wx.showToast({ title: '保存成功', duration: 500, }) }, fail: (err) => { wx.showToast({ title: '获取权限失败', duration: 1000, }) } }) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })