From 3f3bc4b2003b70e4323e994bb726bbd619e330a5 Mon Sep 17 00:00:00 2001 From: yvan.ni <765199919@qq.com> Date: Mon, 4 Nov 2019 09:42:34 +0800 Subject: [PATCH] 详情的分享好友 --- pages/user/Detailed/Detailed.js | 247 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- utils/util.js | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 286 insertions(+), 1 deletion(-) diff --git a/pages/user/Detailed/Detailed.js b/pages/user/Detailed/Detailed.js index 5d0b43c..a7caff0 100644 --- a/pages/user/Detailed/Detailed.js +++ b/pages/user/Detailed/Detailed.js @@ -25,6 +25,11 @@ Page({ * 生命周期函数--监听页面加载 */ onLoad: function(options) { + var img_money = url + "/miniapp/images/plus/share/money.png"; + var img_Ancrown = url + "/miniapp/images/plus/share/Ancrown.png"; + var img_Identification = url + "/miniapp/images/plus/share/Identification.png"; + var img_square = url + "/miniapp/images/plus/share/square.png"; + var privilege_o = url + "/miniapp/images/plus/share/privilege_o.png"; }, selectDetailed: function() { @@ -83,5 +88,245 @@ Page({ return }; this.selectDetailed(); - } + }, + + + saveImageToPhotosAlbum: function () { + if (this.data.imagePath != "") { + wx.previewImage({ + urls: [this.data.imagePath], + }) + return; + } + // if(this.data.is_loading) return false ; + this.data.is_loading=1; + + wx.showLoading({ + title: '生成中...', + }) + + this.setData({ + canvasHidden: false + }) + + var th = this; + //设置画板显示，才能开始绘图 + var card_ming=th.data.bas_ming;//卡的图片 + var user = th.data.user;//会员资料； + var big_card= th.data.big_card;//获取最大的卡 + var user_head = th.data.head_pic;//会员头像 + var img_money = th.data.img_money;//缓存vip的价格 + var img_Ancrown = th.data.img_Ancrown;//会员权益的图片 + var img_Identification = th.data.img_Identification;//会员标识 + var privilege_o = th.data.privilege_o;//勋章图片 + var img_square=th.data.img_square; + + var app = getApp(); + var unit = th.data.screenWidth / 750 * 1.35; + var scene = getApp().globalData.user_id; + console.log("用户头像", th.data.head_pic); + ///二微码 + + var path3 = os.url + "/api/wx/open/app/user/getWeAppEwm/" + + os.stoid + "?sceneValue=" + scene + "&pageValue=pages/user/index/index"; + wx.getImageInfo({ + src: path3, + success: function (res) { + //回调写法 + th.get_head_temp(th.get_goods_temp, function () { + var vpath=res.path; + + console.log("生成二维码", path3); + //开启画布 + const ctx = wx.createCanvasContext('myCanvas'); + + //先画背景 + ctx.drawImage("../../../images/plus/share/mackground.png", 0, 0, 554 * unit, 930 * unit); + ctx.setFontSize(26 * unit); + ctx.setFillStyle("rgb(0,0,0)"); + ctx.fillText(user.nickname, 155 * unit, 75 * unit, 200 * unit); + + var tj_path = "../../../images/userinfo/q_tj.png"; + ctx.drawImage(tj_path, 385 * unit, 45 * unit, 90 * unit, 30 * unit); + ctx.setFontSize(18 * unit); + ctx.setFillStyle("rgb(255,255,255)"); + ctx.fillText("强烈推荐", 394 * unit, 65 * unit); + + ctx.setStrokeStyle("rgb(255,255,255)"); + ctx.setLineDash([5 * unit, 5 * unit], 5 * unit); + ctx.beginPath(); + ctx.moveTo(0, 125 * unit); + ctx.lineTo(554 * unit, 125 * unit); + ctx.stroke(); + + var x = 55 * unit, y = 165 * unit,w = 444 * unit, h = 220 * unit,r = 14 * unit; + ut.draw_randon_rect(ctx,x,y,r,w,h); + ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 + ctx.drawImage(card_ming, x, y, 444 * unit, 220 * unit); // 推进去图片 + ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制 + + ctx.beginPath(); + // 卡图片 + // ctx.drawImage("../../../images/plus/share/one.jpg", 55 * unit, 165 * unit, 444 * unit, 220 * unit,); + ctx.setFontSize(26 * unit); + ctx.setFillStyle('rgb(218,194,169)'); + ctx.fillText(big_card.CardName, 80 * unit, 215 * unit); + ctx.setFontSize(18 * unit); + ctx.setFillStyle('rgb(218,194,169)'); + ctx.fillText("开通会员年卡仅" + big_card.CardFee+"元", 80 * unit, 240 * unit); + + ctx.drawImage(privilege_o, 80 * unit, 343 * unit, 20 * unit, 20 * unit); + + ctx.setFontSize(14 * unit); + ctx.setFillStyle('rgb(218,194,169)'); + ctx.fillText("根据大家购买数据，您成为超级会员预计可省￥3031元", 105 * unit, 360 * unit); + + ctx.rect(70 * unit, 425 * unit, 182 * unit, 1 * unit); + ctx.setFillStyle('rgb(218,194,169)'); + ctx.fill(); + + ctx.drawImage(img_square, 267 * unit, 420 * unit, 13 * unit, 13 * unit); + + ctx.beginPath(); + ctx.rect(295 * unit, 425 * unit, 182 * unit, 1 * unit); + ctx.setFillStyle('rgb(218,194,169)'); + ctx.fill(); + + ctx.drawImage(img_square, 80 * unit, 470 * unit, 10 * unit, 10 * unit); + ctx.setFontSize(24 * unit); + ctx.setFillStyle("rgb(198,165,126)"); + ctx.fillText("超级VIP权益", 100 * unit, 475 * unit); + + ctx.setFontSize(20 * unit); + ctx.setFillStyle("rgb(198,165,126)"); + ctx.fillText("超级会员专属权益", 100 * unit, 505 * unit); + ctx.drawImage(img_Ancrown, 355 * unit, 440 * unit, 65 * unit, 65 * unit); + + ctx.rect(85 * unit, 530 * unit, 375 * unit, 1 * unit) + ctx.setFillStyle('rgb(218,194,169)') + ctx.fill(); + + ctx.drawImage(img_square, 80 * unit, 575 * unit, 10 * unit, 10 * unit); + ctx.setFontSize(24 * unit); + ctx.setFillStyle("rgb(198,165,126)"); + ctx.fillText("超级VIP标识", 100 * unit, 580 * unit); + + ctx.setFontSize(20 * unit); + ctx.setFillStyle("rgb(198,165,126)"); + ctx.fillText("彰显尊贵身份的象征", 100 * unit, 610 * unit); + ctx.drawImage(img_Identification, 355 * unit, 548 * unit, 65 * unit, 65 * unit); + + ctx.rect(85 * unit, 635 * unit, 375 * unit, 1 * unit); + ctx.setFillStyle('rgb(218,194,169)'); + ctx.fill(); + + ctx.drawImage(img_square, 80 * unit, 695 * unit, 10 * unit, 10 * unit); + ctx.setFontSize(24 * unit); + ctx.setFillStyle("rgb(198,165,126)"); + ctx.fillText("超级VIP价格", 100 * unit, 695 * unit); + + ctx.setFontSize(20 * unit); + ctx.setFillStyle("rgb(198,165,126)"); + ctx.fillText("享受专属会员超低价", 100 * unit, 725 * unit); + ctx.drawImage(img_money, 355 * unit, 660 * unit, 65 * unit, 65 * unit); + + ctx.rect(85 * unit, 750 * unit, 375 * unit, 1 * unit) + ctx.setFillStyle('rgb(218,194,169)') + ctx.fill(); + + ctx.drawImage(vpath, 100 * unit, 780 * unit, 110 * unit, 110 * unit); + + ctx.setFontSize(20 * unit); + ctx.setFillStyle("#000"); + ctx.fillText("解锁新权益 精彩享不停", 230 * unit, 825 * unit); + + ctx.setFontSize(20 * unit); + ctx.setFillStyle("#000"); + ctx.fillText("长按识别二维码,立即开通!", 230 * unit, 865 * unit); + + //---绘制圆形要放在最后---- + ctx.save(); + ctx.beginPath(); + var h_x = 60 * unit; + var h_y = 24 * unit; + var h_r = 40 * unit; + var cx = h_x + h_r; + var cy = h_y + h_r; + ctx.arc(cx, cy, h_r, 0, Math.PI * 2, false); + ctx.closePath(); + ctx.fill(); + ctx.clip(); + ctx.drawImage(th.data.head_pic, h_x, h_y, h_r * 2, h_r * 2); + ctx.restore(); + + x = 345 * unit, + y = 190 * unit, + w = 105 * unit, + h = 30 * unit, + r = 14 * unit; + ut.draw_randon_rect(ctx,x,y,r,w,h); + ctx.setFontSize(18 * unit); + ctx.setFillStyle("#000"); + ctx.fillText("立即开通", 362 * unit, 212 * unit); + + + + //绘制图片 + ctx.draw(false, + + function(){ + + setTimeout(function(){ + wx.canvasToTempFilePath({ + x: 0, + y: 0, + width: 750, + height: 930, + destWidth: 1.2 * 750 * 750 / th.data.screenWidth, + destHeight: 1.2 * 1217 * 750 / th.data.screenWidth, + canvasId: 'myCanvas', + success: function (res) { + wx.hideLoading();//关闭生成中的方法 + th.data.is_loading = 0; + console.log("生成的海报"); + console.log(res.tempFilePath); + var tempFilePath = res.tempFilePath; + th.setData({ + imagePath: tempFilePath, + maskHidden: false, + canvasHidden: true + }); + wx.previewImage({ + urls: [res.tempFilePath], + }) + if (!res.tempFilePath) { + wx.showModal({ + title: '提示', + content: '图片绘制中，请稍后重试', + showCancel: false + }) + } + + } + + }) + },500) + + + } + ) + + + }) + } + }) + + }, + + + + + + + }) \ No newline at end of file diff --git a/utils/util.js b/utils/util.js index 169e371..cdc6743 100644 --- a/utils/util.js +++ b/utils/util.js @@ -258,6 +258,46 @@ function get_rand_item(arr){ return arr[ind]; } + +//画布画椭圆矩形 +function draw_randon_rect(ctx,x,y,r,w,h){ + ctx.save(); + // 开始绘制 + ctx.beginPath(); + // 因为边缘描边存在锯齿，最好指定使用 transparent 填充 + // 这里是使用 fill 还是 stroke都可以，二选一即可 + ctx.setFillStyle('rgb(237,188,150)') + // ctx.setStrokeStyle('transparent') + // 左上角 + ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5) + + // border-top + ctx.moveTo(x + r, y) + ctx.lineTo(x + w - r, y) + ctx.lineTo(x + w, y + r) + // 右上角 + ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2) + + // border-right + ctx.lineTo(x + w, y + h - r) + ctx.lineTo(x + w - r, y + h) + // 右下角 + ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5) + + // border-bottom + ctx.lineTo(x + r, y + h) + ctx.lineTo(x, y + h - r) + // 左下角 + ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI) + + // border-left + ctx.lineTo(x, y + r) + ctx.lineTo(x + r, y) + // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应 + ctx.fill(); + +} + module.exports = { formatTime: function(e, r) { var t = e ? new Date(1e3 * e) : new Date(), n = t.getFullYear(), o = t.getMonth() + 1, a = t.getDate(), u = t.getHours(), i = t.getMinutes(), f = t.getSeconds(), s = function(e) { -- libgit2 0.21.4