// pages/report/share/share.js Page({ /** * 页面的初始数据 */ data: { barHeight : getApp().globalData.barHeight, // 状态栏高度 userData : '', // 用户信息 inviteCode : '', // 二维码 //海报 canvas : '' }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { // 初始化画布 wx.createSelectorQuery().select('#coverCanvas').fields({node: true, size: true}).exec(canvasNode => { const canvas = canvasNode[0].node canvas.width = 375 canvas.height = 800 this.setData({ canvas }) }) }, /** * 生命周期函数--监听页面显示 */ onShow() { // 小程序码 this.ShareInfo(); // 获取用户信息 this.userInfo(); }, /** * 小程序码 */ ShareInfo() { wx.$api.user.miniShare({ url: '/pages/index/index' }).then(res => { this.setData({ inviteCode: res.data.qrcode }) }).catch(err => {}) }, /** * 用户信息 */ userInfo() { wx.$api.user.userIndex().then(res => { this.setData({ userData : res.data }) }).catch(err => {}) }, /** * 生成海报 */ onCanvas(){ wx.showLoading({ title: '生成图片中...', mask : true }) const canvas = this.data.canvas const ctx = canvas.getContext('2d') const codeImgEl = canvas.createImage() const backBackEl = canvas.createImage() codeImgEl.src = this.data.inviteCode //二维码 backBackEl.src = 'https://cdn.shuiganying.com/images/2023/04/04/1b1781214a4b34bb37948d2adb86f142.png' //背景素材 const codeImgLoding = new Promise((resolve, reason) => { codeImgEl.onload = () => { resolve() } }) const backBackLoding = new Promise((resolve, reason) => { backBackEl.onload = () => { resolve() } }) Promise.all([codeImgLoding, backBackLoding]).then(() => { // 绘制[背景] ctx.drawImage(backBackEl, 0, 0, 375, 800) // 绘制[二维码] ctx.drawImage(codeImgEl, 260, 650, 80, 80) // 文字 ctx.font = "bold 20px Arial"; //字体大小 ctx.fillStyle = "#3b7cff"; //字体颜色 ctx.textAlign = "center" ctx.fillText('水感应 | AI测肤', 190, 510); // 文字 ctx.font = "15px Arial"; //字体大小 ctx.fillStyle = "#000000"; //字体颜色 ctx.textAlign = "center" ctx.fillText('基于强大人脸算法,深度图像学习能力', 190, 543); // 文字 ctx.font = "15px Arial"; //字体大小 ctx.fillStyle = "#000000"; //字体颜色 ctx.textAlign = "center" ctx.fillText('准确分析皮肤状态,针对性发现皮肤问题', 188, 565); // 文字 ctx.font = "14px Arial"; //字体大小 ctx.fillStyle = "#666666"; //字体颜色 ctx.textAlign = "center" ctx.fillText('肤质、肤色、肤龄、皱纹、毛孔、黑头等~', 188, 595); // 文字 ctx.font = "15px Arial"; //字体大小 ctx.fillStyle = "#000000"; //字体颜色 ctx.fillText('参与测试成为VIP立享VIP权益!', 145, 682); // 文字 ctx.font = "15px Arial"; //字体大小 ctx.fillStyle = "#000000"; //字体颜色 ctx.fillText('活动火爆,先到先得哦~', 120, 713); wx.hideLoading() wx.canvasToTempFilePath({ canvas: this.data.canvas, success : res => { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: saveRes => { wx.showToast({ title: '海报已保存至您的相册', icon : 'none' }) this.setData({ shareSee: false }) }, fail: () => { wx.hideLoading() wx.showModal({ title: '提示', content: '暂未授权小程序写入您的相册,无法存储海报', confirmColor: '#e50d01', confirmText: '去设置', success: res => { if (res.confirm) { wx.openSetting() } } }) } }) }, }) }).catch(err => { wx.showToast({ title: '图片加载失败', icon : 'none' }) }) }, /** * 返回上一页 */ returnGo() { wx.navigateBack({ delta: 1 }) }, /** * 微信分享 */ onShareAppMessage(){ return { title : this.data.userData.nickname + ':' + '邀请您一起AI测肤', path : "/pages/index/index?invite=" + wx.getStorageSync("invite"), imageUrl: "https://cdn.shuiganying.com/images/2023/04/04/382850bdd565b1a687e4547c5c4de0f7.png" } } })