小程序生成海报并保存到相册

* 图片必须是本地的不能是base64位的

1.安装

# npm 
npm i wxa-plugin-canvas -S --production 
 # yarn 
 yarn add wxa-plugin-canvas --production

2.配置

"usingComponents": {
    "poster": "wxa-plugin-canvas/poster"
 },

3.引入

import Poster from 'wxa-plugin-canvas/poster/poster'

4.使用

4.1：wxss文件

 <view class="handel_poster_btn btn" bindtap="drawSharePic">
    <!-- 生成海报的按钮 -->
    <image src="../../image/invite/poster_btn.png"></image>
</view>

<poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
<view wx:if="{{showposterImg}}" class="popup-mask"></view>
 <!-- 透明黑的背景 -->
    <view wx:if="{{showposterImg}}" class="posterImg-box">
          <image mode="widthFix" class="posterImg"               src="{{posterImg}}"></image>
  <view class="btn-create" bindtap="savePosterPic">保存到相册的阿牛    </view>
  <view class="close_img">
     <!-- 关闭透明层的按钮图片 -->
    <image src="../../image/invite/close.png" class="img" bindtap="closePoster"></image>
  </view>
</view>

4.2：js文件

 drawSharePicDone(qrcode, pic) {
    this.setData({
      posterConfig: {
        width: 620,
        height: 954,
        debug: false,
        images: [{
            x: 0,
            y: 0,
            url: pic, // 背景图片
            width: 620,
            height: 954
          },
          {
            x: 150,
            y: 500,
            url: qrcode, // 二维码
            width: 320,
            height: 320
          }
        ],
      }
    }, () => {
      Poster.create();
    });
  },
  savePosterPic() {
    const _this = this
    wx.saveImageToPhotosAlbum({
      filePath: this.data.posterImg,
      success: (res) => {
        console.log('保存成功')
        wx.showModal({
          content: '已保存到手机相册',
          showCancel: false,
          confirmText: '知道了',
          confirmColor: '#333'
        })
      },
      complete: () => {
        _this.setData({
          showposterImg: false
        })
      },
      fail: (res) => {
        if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny" || res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
          console.log("当初用户拒绝，再次发起授权")
          wx.showModal({
            title: '提示',
            content: '需要您授权保存相册',
            showCancel: false,
            success: modalSuccess => {
              wx.openSetting({
                success(settingdata) {
                  console.log("settingdata", settingdata)
                  if (settingdata.authSetting['scope.writePhotosAlbum']) {
                    wx.showModal({
                      title: '提示',
                      content: '获取权限成功,再次点击图片即可保存',
                      showCancel: false,
                    })
                  } else {
                    wx.showModal({
                      title: '提示',
                      content: '获取权限失败，将无法保存到相册哦~',
                      showCancel: false,
                    })
                  }
                },
                fail(failData) {
                  console.log("failData", failData)
                },
                complete(finishData) {
                  console.log("finishData", finishData)
                }
              })
            }
          })
        }
      }
    })
  },
  closePoster: function () {
    this.setData({
      showposterImg: false
    })
  },