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 }