微信小程序 api+前端实现生成分享海报

1.先看效果图，点击分享海报按钮，然后弹出分享海报

 2.前端代码

这里用的组件有vant组件库还有canvas_drawer（一个画布组件）

canvas_drawer下载地址https://github.com/kuckboy1994/mp_canvas_drawer

把 components 中的 canvasdrawer 拷贝到自己项目下，然后再app.json中引用就行了，如下

"usingComponents": {

    "canvasdrawer": "/static/canvasdrawer/canvasdrawer"

  }

注意！注意！注意！canvas_drawer的painting属性画布里面的图片不能用本地的，不然会显示不出来！

需要用到的数据源

data () {
    return {
      isschb: true,
      xsxyid: 0,
      painting: null,
      showSharePosterPopup: false,
      sharePosterImg: '',
      xssptp: '', //现实的商品图片路径
      nickname: ''
    }
  },

我这里点击的分享海报是用的一个vant组件库的图标

<view style="position: fixed;bottom: 15%;left: 86%;">
        <view v-if="isschb">
          <van-icon name="photo-o" size="40px" style="margin-bottom: 10px;" color="#87CEEB"
            @click="generateSharePoster" />
        </view>
      </view>

然后弹窗也是用的vant里面的Popup弹出层

<!-- 预览海报弹窗 -->
      <van-popup :show="showSharePosterPopup" :close-on-click-overlay="true" round position="bottom"
        custom-style="height:80%;" @close="handleSharePosterPopupClose">
        <view style="height:50px;background:#eee;">
          <van-row>
            <van-col span="22">
              <view style="line-height:50px;" class="margin-left text-xl">保存到相册</view>
            </van-col>
            <van-col span="2">
              <van-icon custom-class="margin-top-sm" size="25" name="cross" @click="handleSharePosterPopupClose">
              </van-icon>
            </van-col>
          </van-row>
        </view>
        <img :src="sharePosterImg"
          style="width:70%;height:70%;margin-left:15%;margin-top:10px;border:1px solid #ddd;" />
        <view class="margin-lr margin-tb">
          <van-button type="danger" block @click="savePosterImg">保存图片</van-button>
        </view>
        <view class="margin-bottom text-center text-gray">保存图片到手机相册后，将图片分享到您的圈子</view>
        <canvasdrawer :painting="painting" @getImage="sharePosterImage" />
      </van-popup>

然后是Js里面的方法

// 生成分享海报
    generateSharePoster () {
      let that = this
      wx.downloadFile({
        url: that.bzyrtx.replace('https://thirdwx.qlogo.cn', 'https://wx.qlogo.cn'),
        success: (res) => {
          var picurl = res.tempFilePath
          wx.showLoading({
            title: '海报生成中..',
            mask: true
          })
          let url = 'api/Xys/create/xcxcode?api-version=1&xyid=' + that.xsxyid
          that.$http
            .get(url)
            .then((res) => {
              if (res) {
                console.log(that.xssp