小程序生成海报分享流程

步骤一，绘制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('保存失败')
    })
  }