diff --git a/pages/bill/bill.vue b/pages/bill/bill.vue index 74b6487..f0983ea 100644 --- a/pages/bill/bill.vue +++ b/pages/bill/bill.vue @@ -89,80 +89,31 @@ createNewImg() { var that = this; var context = wx.createCanvasContext('mycanvas'); - context.setFillStyle("#ffe200") - context.fillRect(0, 0, 375, 667) - var path = "../../static/images/empty.png"; - context.drawImage(path, 0, 0, 375, 183); - - that.info.avatar = "../../static/images/system/payfail.png" - var path1 = that.info.avatar; - console.log(path1, "path1") - //定义图片 - var path2 = "../../static/images/system/payfail.png"; - var path3 = "../../static/images/system/paysuccess.png"; - var path4 = "../../static/images/system/paysuccess.png"; - var path5 = "../../static/images/system/refresh.png"; - context.drawImage(path2, 126, 186, 120, 120); - //不知道是什么原因,手机环境能正常显示 - // context.save(); // 保存当前context的状态 + var path = "../../static/images/poster-1.jpg"; + context.drawImage(path, 0, 0, 375, 667); var name = that.info.nickname; //绘制名字 context.setFontSize(24); - context.setFillStyle('#333333'); - context.setTextAlign('center'); - context.fillText(name, 185, 340); - context.stroke(); - //绘制一起吃面标语 - context.setFontSize(14); - context.setFillStyle('#333333'); - context.setTextAlign('center'); - context.fillText("邀请你一起去吃面", 185, 370); - context.stroke(); - //绘制验证码背景 - context.drawImage(path3, 48, 390, 280, 84); - //绘制code码 - context.setFontSize(40); - context.setFillStyle('#ffe200'); + context.setFillStyle('#fff'); context.setTextAlign('center'); - context.fillText(that.code, 185, 435); + context.fillText(name, 34, 620); context.stroke(); - //绘制左下角文字背景图 - context.drawImage(path4, 25, 520, 184, 82); - context.setFontSize(12); - context.setFillStyle('#333'); - context.setTextAlign('left'); - context.fillText("进入小程序输入朋友的邀请", 35, 540); - context.stroke(); - context.setFontSize(12); - context.setFillStyle('#333'); - context.setTextAlign('left'); - context.fillText("码,朋友和你各自获得通用", 35, 560); - context.stroke(); - context.setFontSize(12); - context.setFillStyle('#333'); - context.setTextAlign('left'); - context.fillText("优惠券1张哦~", 35, 580); - context.stroke(); - //绘制右下角扫码提示语 - context.drawImage(path5, 248, 578, 90, 25); - //绘制头像 - context.arc(186, 246, 50, 0, 2 * Math.PI) //画出圆 - context.strokeStyle = "#ffe200"; - context.clip(); //裁剪上面的圆形 - context.drawImage(path1, 136, 196, 100, 100); // 在刚刚裁剪的园上画图 + //绘制二维码 + + context.draw(); //将生成好的图片保存到本地,需要延迟一会,绘制期间耗时 setTimeout(function() { wx.canvasToTempFilePath({ canvasId: 'mycanvas', success: function(res) { - var tempFilePath = res.tempFilePath; - that.imagePath = tempFilePath + var tempFilePath1 = res.tempFilePath; + that.imagePath = tempFilePath1 that.canvasHidden = true console.log('海报生成成功') console.log(res) - console.log(that.imagePath) + console.log('图片链接',that.imagePath) }, fail: function(res) { console.log(res); @@ -200,12 +151,9 @@ icon: 'loading', duration: 1000 }); - setTimeout(function() { - wx.hideToast() - that.createNewImg(); - - that.maskHidden = true - }, 1000) + wx.hideToast() + that.createNewImg(); + that.maskHidden = true } }, onLoad(options) { diff --git a/static/images/poster-1.jpg b/static/images/poster-1.jpg new file mode 100644 index 0000000..3391b03 Binary files /dev/null and b/static/images/poster-1.jpg differ