// pages/poster/poster.js const app = getApp() Page({ /** * 页面的初始数据 */ data: { imgUrl: app.globalData.urlStatic,//图片路径 canvasContron:null,//canvas posterBg:[],//海报背景 qrCodeUrl:"https://www.jiyou-tech.com/2020/496_qichen/static/images/testQrCode.png",//二维码图片 userHead: app.globalData.userInfoData ? app.globalData.userInfoData.avatarUrl : null,//用户头像 rankNum: '8908',//缓存数字 windowScale:0,//屏幕缩放比 windowW: 0,//屏幕宽度 windowH: 0,//屏幕高度 posterUrl:[],//海报图片 canvasShow: true,//是否渲染canvas swiperCurrent: 0,//swiper选中的元素下标 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { app.globalData.nowPage = 2; }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.data.canvasContron = wx.createCanvasContext('myCanvas'); this.getCertificationCount(); }, cacheFun:function(){ wx.getSystemInfo({ success: option => { this.data.windowScale = option.windowWidth / 750; this.data.windowW = option.windowWidth; this.data.windowH = option.windowHeight; var countNum = 0; wx.getImageInfo({//缓存海报背景 src: this.data.imgUrl + '/images/tempImg1.jpg', success: res => { this.data.posterBg.push(res.path); countNum += 1; } }) wx.getImageInfo({//缓存二维码 src: this.data.qrCodeUrl, success: res => { this.data.qrCodeUrl = res.path; countNum += 1; } }) if (this.data.userHead) { wx.getImageInfo({//缓存头像 src: this.data.userHead, success: res => { this.data.userHead = res.path; countNum += 1; } }) } wx.getImageInfo({//缓存数字背景 src: this.data.imgUrl + '/images/posterNum.png', success: res => { this.data.numBg = res.path; countNum += 1; } }) this.data.rankNum = this.data.rankNum.toString().split(""); for (let i = 0; i < this.data.rankNum.length; i++) { wx.getImageInfo({//缓存数字 src: this.data.imgUrl + '/images/nums/' + this.data.rankNum[i] + '.png', success: res => { this.data.rankNum[i] = res.path; countNum += 1; } }) } let setInt = setInterval(() => { if (countNum >= 8) { this.posterDrawing(1); clearInterval(setInt); } }, 50); } }) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { return { title: '您有一份启辰星专属礼品待领取', imageUrl: this.data.imgUrl + "/images/posterShareImg" + (this.data.swiperCurrent+1)+".jpg", path: "/pages/coupon/coupon?friendOpenid=" + app.globalData.openid } }, saveImg:function(){//保存到手机 wx.saveImageToPhotosAlbum({ filePath: this.data.posterUrl[this.data.swiperCurrent], success(res) { wx.showToast({ title: '保存成功' }) } }) }, posterDrawing: function (e) {//海报绘制 var ctx = this.data.canvasContron;//canvas对象 var scale = this.data.windowScale;//屏幕缩放比 //背景 ctx.drawImage(this.data.posterBg[e-1], 0, 0, scale * 444, scale * 817);// ctx.setFillStyle("#FFFFFF"); ctx.save(); ctx.beginPath(); //开始绘制 //先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针 ctx.arc(scale * 48 / 2 + scale * 49, scale * 48 / 2 + scale * 538, scale * 48 / 2, 0, Math.PI * 2, false); ctx.clip(); //剪切 ctx.drawImage(this.data.userHead, scale * 49, scale * 538, scale * 48, scale * 48); //头像 ctx.restore(); //恢复之前保存的绘图上下文 //名称 ctx.setFontSize(scale * 28); ctx.setFillStyle('#FFFFFF'); ctx.setTextAlign('left'); ctx.fillText(app.globalData.userInfoData ? app.globalData.userInfoData.nickName : "", scale * 102, scale *572); //我是第XXX星探 ctx.drawImage(this.data.numBg, scale * 50, scale * 598, scale * 333, scale * 74); //排名数字 ctx.drawImage(this.data.rankNum[0], scale * 168, scale * 602, scale * 32, scale * 40); ctx.drawImage(this.data.rankNum[1], scale * 202, scale * 602, scale * 32, scale * 40); ctx.drawImage(this.data.rankNum[2], scale * 236, scale * 602, scale * 32, scale * 40); ctx.drawImage(this.data.rankNum[3], scale * 270, scale * 602, scale * 32, scale * 40); //二维码 ctx.drawImage(this.data.qrCodeUrl, scale * 282, scale * 672, scale * 105, scale* 106); //绘制 ctx.draw(false, setTimeout(() => { wx.canvasToTempFilePath({ width:scale*444, height: scale * 817, canvasId: 'myCanvas', success: res => { this.data.posterUrl.push(res.tempFilePath); this.setData({ posterUrl: this.data.posterUrl }) if (e < 3) { wx.getImageInfo({ src: this.data.imgUrl + '/images/tempImg'+(e+1)+'.jpg', success: res => { this.data.posterBg.push(res.path); this.posterDrawing(e + 1); } }) }else{ this.setData({ canvasShow:false }) } } }) }, 300)); }, savePoster:function(){//预览海报 wx.previewImage({ current: this.data.posterUrl[this.data.swiperCurrent], urls: this.data.posterUrl // 需要预览的图片http链接列表 }) }, prevImg() {//上一张图片 if (this.data.swiperCurrent > 0) { this.setData({ swiperCurrent: this.data.swiperCurrent -= 1, }) } }, nextImg() {//下一张图片 if (this.data.swiperCurrent < this.data.posterUrl.length - 1) { this.setData({ swiperCurrent: this.data.swiperCurrent += 1, }) } }, swiperChange(e) {//通过鼠标滑动改变swiper时 if (e.detail.source == "touch") { this.setData({ swiperCurrent: e.detail.current, }) } }, getCertificationCount: function () {//获取星探计划人数 app.wxRequest(app.globalData.urlRoot +"userInfo/getCertificationCount",{},res=>{ this.createQrcode(); if(res.code==200){ this.data.rankNum = res.data.total; } },this) }, createQrcode: function () {//获取个人小程序分享码 app.wxRequest(app.globalData.urlRoot + "wxInfo/getQrcode", {}, res => { if (res.code = 200) { this.data.qrCodeUrl = res.data.qrcodeUrl; } this.cacheFun(); }, this) } })