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             }