小程序生成海报分享流程

步骤一，绘制canvas

drawCanvas () { const { productDetail: { product } } = this.state; const { globalStore } = this.props; let productName = product.name.split(' '); productName = productName[0] + productName[1] + productName[2]; globalStore.userDetailSync().then(userInfo => { const ctx = Taro.createCanvasContext('cvs'); Taro.getSystemInfo().then(res => { const systemWidth = res.safeArea.width; const desginWidth = 750; function dprSize (num) { return (systemWidth / desginWidth) * num } //绘制 Taro.getImageInfo({ src: Tips.checkUrl(product.pic), success (result) { const path = result.path; ctx.drawImage(path, dprSize(18), dprSize(90), dprSize(350), dprSize(350)); ctx.rect(dprSize(18), dprSize(22), dprSize(54), dprSize(52)); ctx.setFillStyle('#EBEBEB'); ctx.fill(); ctx.setFontSize(dprSize(20)); ctx.fillStyle = '#222'; ctx.fillText(userInfo.username, dprSize(88), dprSize(42)); ctx.fillStyle = '#858585'; ctx.fillText('推荐给您一个好物', dprSize(88), dprSize(70)); /* ctx.rect(dprSize(18), dprSize(90), dprSize(350), dprSize(350)); ctx.setFillStyle('#EBEBEB'); ctx.fill(); */ ctx.beginPath() ctx.fillStyle = '#222'; ctx.setFontSize(dprSize(24)); ctx.fillText(productName, dprSize(20), dprSize(498)); ctx.fillStyle = '#FF3100'; ctx.fillText(`¥${product.price}`, dprSize(20), dprSize(538)); ctx.fillStyle = '#9C9C9C'; ctx.setFontSize(dprSize(18)); ctx.fillText(`¥${product.originalPrice}`, dprSize(20), dprSize(570)); ctx.arc(dprSize(330), dprSize(508), dprSize(42), 0, 2 * Math.PI); ctx.setFillStyle('#EAEAEA'); ctx.fill(); ctx.fillStyle = '#ABABAB'; ctx.setFontSize(dprSize(18)); ctx.fillText('长按识别', dprSize(295), dprSize(580)) ctx.draw(); } }) }) }) }

步骤二，保存canvas图片到相册

authorCamera (cvs_id) { // 保存一个canvas图片到相册 const _this = this; Taro.getSetting({ success (res) { if (res.authSetting['scope.writePhotosAlbum']) { // 授权了 _this.saveCanvasToCamera(cvs_id) } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) { // 用户第一次点击，弹出toast Taro.authorize({ scope: 'scope.writePhotosAlbum', success () { // 授权成功 _this.saveCanvasToCamera(cvs_id) }, fail () { // 授权失败 _this.toast('您拒绝了授权') } }) } else { // 用户点击了取消授权之后走的逻辑 Taro.openSetting({ success (result) { if (result.authSetting['scope.writePhotosAlbum']) { _this.saveCanvasToCamera(cvs_id) } else { _this.toast('您拒绝了授权') } } }) } }, fail () { // 获取设置失败 _this.toast('保存失败') } }) }, saveCanvasToCamera (cvs_id) { // 保存一个canvas图片到相册 const _this = this; Taro.canvasToTempFilePath({ canvasId: cvs_id, }).then(res => { Taro.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success () { _this.toast('保存成功') }, fail () { _this.toast('保存失败') } }) }).catch(() => { _this.toast('保存失败') }) }