1 // cavans畫布描繪海報
2 async writeCanvas() {
3 this.writeCanvasFinish = false
4 const ctx = uni.createCanvasContext('myCanvas', this)
5 let bgImgPath = await this.getImageInfo(this.cavansBGIMG)
6 this.cavansBaseImg = bgImgPath.path
7 this.canvasW = bgImgPath.width
8 this.canvasH = bgImgPath.height
9 let canvasW = bgImgPath.width
10 let canvasH = bgImgPath.height
11
12 // let ewmUrl = 'https://api-dev.macaotown.com/wx/get_miniapp_qrcode?url=pages/index/index&extra=' + this.userInfo.id
13 let ewmUrl = this.$api + 'mysteryboxnum/get_miniapp_qrcode?url=pages/index/index&extra=' + this
14 .userInfo.id
15 let ewm = await this.downLoadFile(ewmUrl)
16 let ewm1 = await this.getImageInfo(this.appletImg)
17 // let textImg = await this.getImageInfo(
18 // 'https://img-cdn.macaotown.com/o_1f37oc0upjoc1hoq1jl04fjsqja.png')
19 let nickNamebef = this.userInfo.nickname.length > 8 ? (this.userInfo.nickname.substring(0, 8) +
20 '...') : this.userInfo.nickname
21 let nickName = nickNamebef + '邀請你開盲盒' // 昵称
22 let font1 = "就差你了!"
23 let font2 = "掃碼開盲盒!"
24 let font3 = "齊贏大獎!"
25 let font4 = "微信掃一掃加入遊戲"
26 // cavans繪製必須要設置定時器，不設置就不會描繪，搞不懂為什麼
27 setTimeout(() => {
28 // 画大背景 单位是 px 不是 rpx
29 ctx.drawImage(bgImgPath.path, 0, 0, canvasW, canvasH)
30 ctx.save()
31 //开始路径画圆,剪切处理
32 ctx.beginPath()
33 ctx.arc(this.canvasW - 121, this.canvasH - 181, 80, 0, 2 * Math.PI, false)
34 ctx.clip()
35 if (ewm && ewm.tempFilePath) {
36 ctx.drawImage(ewm.tempFilePath, this.canvasW - 200, this.canvasH - 261, 160, 160)
37 } else {
38 // 備用无参数二维码
39 ctx.drawImage(ewm1.path, this.canvasW - 200, this.canvasH - 261, 160, 160)
40 }
41 // 還原狀態
42 ctx.restore()
43 // 保存上下文
44 ctx.save()
45 // 特殊字體文字
46 // ctx.drawImage(textImg.path, 40, this.canvasH - 228, 315, 183)
47 // ctx.save()
48
49 // 恢复画布
50 ctx.restore()
51 // 写昵称 文本居中的起点是指居中的那个点
52 ctx.setTextAlign('left')
53
54 ctx.setFillStyle('#FFFFFF')
55
56 // 用戶暱稱文字
57 // ctx.font = '36px serif'
58 // ctx.fillText(nickName, 40, this.canvasH - 246)
59 // // 標題一文字大小
60 // ctx.font = 'bold 72px serif'
61 // ctx.fillText(font1, 40, this.canvasH - 168)
62 // // 標題二文字大小
63 // ctx.font = 'bold 48px serif'
64 // ctx.fillText(font2, 40, this.canvasH - 108)
65 // ctx.fillText(font3, 40, this.canvasH - 52)
66 ctx.font = '28px serif'
67 ctx.fillText(font4, this.canvasW - 304, this.canvasH - 50)
68 ctx.draw(true, (res) => {
69 this.writeCanvasFinish = true
70 this.saveImgToWX();
71 })
72 }, 1000)
73 },
74 saveImgToWX(isSave) {
75 if (isSave) {
76 uni.authorize({
77 scope: 'scope.writePhotosAlbum',
78 success: () => {
79 uni.showLoading({
80 title: '正在生成海報'
81 })
82 // 保海報到相冊
83 let that = this
84 uni.canvasToTempFilePath({
85 x: 0, // 起点横坐标
86 y: 0, // 起点纵坐标
87 width: that.canvasW, // canvas 当前的宽
88 height: that.canvasH, // canvas 当前的高
89 destWidth: that.canvasW * that.pixelRatio, // canvas 当前的宽 * 设备像素比
90 destHeight: that.canvasH * that.pixelRatio, // canvas 当前的高 * 设备像素比
91 canvasId: 'myCanvas',
92 success: (res) => {
93 if (isSave) {
94 // #ifdef H5
95 // H5環境直接把base64放在image，需要用戶長按保存
96 uni.showToast({
97 title: '長按圖片保存海報',
98 icon: 'none'
99 })
100 // #endif
101 // #ifdef MP
102 //调取小程序中的保存圖片，把海報保存在手機相冊
103 uni.saveImageToPhotosAlbum({
104 filePath: res.tempFilePath,
105 success: (res) => {
106 // uni.showToast({
107 // title: '可以去朋友圈分享給好友啦',
108 // icon: 'none'
109 // })
110 this.shareLineSuccess = true
111 this.animationScaleIn = {}
112 setTimeout(res => {
113 this.animationScaleIn =
114 animationJS.scaleIn()
115 })
116 },
117 fail: (res) => {
118 if (res.errMsg !=
119 'saveImageToPhotosAlbum:fail auth deny'
120 )
121 return false
122 }
123 })
124 // #endif
125 uni.hideLoading()
126 }
127 },
128 fail: (res) => {
129 uni.hideLoading()
130 this.showPro = true
131 this.propMessage = "海報生成失敗"
132 console.log(res)
133 }
134 }, this)
135 },
136 fail: res => {
137 this.ifAuthorPhoto = true
138 }
139 })
140 } else {
141 return false
142 }
143 }
浙公网安备 33010602011771号