dw_lotter_draw/pages/share-poster/share-poster.js

import Poster from '../../components/wxa-plugin-canvas/poster/poster';

const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    posterConfig: {},
    posterImage: ''
  },

  onLoad: function () {
    var that = this
    this.setData({
      posterConfig: {
        width: 750,
        height: 1200,
        debug: false,
        blocks: [
          {
            height: 920,
            width: 700,
            x: 25,
            y: 90,
            backgroundColor: '#fff',
            borderRadius: 34
          },
          {
            width: 134,
            height: 134,
            x: 308,
            y: 23,
            borderRadius: 134,
            backgroundColor: '#3EA0FF',
            opacity: 0.5,
            zIndex: 1,
          },
        ],
        texts: [
          {
            x: 375,
            y: 185,
            baseLine: 'middle',
            text: wx.getStorageSync('USER_INFO').user.nickname,
            fontSize: 28,
            color: '#171717',
            textAlign: 'center',
            zIndex: 200
          },
          {
            x: 375,
            y: 215,
            baseLine: 'top',
            text: '邀请你参与抽奖',
            fontSize: 38,
            color: '#52AAFF',
            textAlign: 'center',
            zIndex: 200
          },
          {
            x: 60,
            y: 660,
            fontSize: 38,
            baseLine: 'middle',
            text: wx.getStorageSync('POSTER_INFO').title,
            lineNum: 1,
            color: '#333',
            zIndex: 200
          },
          {
            x: 60,
            y: 705,
            baseLine: 'middle',
            text: wx.getStorageSync('POSTER_INFO').time,
            fontSize: 28,
            color: '#888',
            zIndex: 200
          },
          {
            x: 280,
            y: 845,
            baseLine: 'middle',
            text: '长按识别小程序码，参与抽奖',
            fontSize: 30,
            color: '#52AAFF',
            zIndex: 200
          }
        ],
        images: [
          {
            width: 114,
            height: 114,
            x: 318,
            y: 33,
            borderRadius: 114,
            url: wx.getStorageSync('USER_INFO').user.avatar_url,
            zIndex: 2
          },
          {
            width: 700,
            height: 325,
            x: 25,
            y: 280,
            url: wx.getStorageSync('POSTER_INFO').imageUrl,
          },
          {
            width: 180,
            height: 180,
            x: 60,
            y: 755,
            url: wx.getStorageSync('POSTER_INFO').qrcode,
          }
        ]
      }
    })
    wx.getSystemInfo({
      success: function (res) {
        let newConfig = that.data.posterConfig
        newConfig.height = res.windowHeight
        that.setData({
          posterConfig: newConfig
        })
      },
    })
    this.onCreatePoster();
  },

  onPosterSuccess(e) {
    const { detail } = e
    this.setData({
      posterImage: detail
    })
  },
  onCreatePoster: function () {
    this.setData({ posterConfig: this.data.posterConfig }, () => {
      Poster.create(true);
    });
  },
  savePoster: function () {
    var that = this
    wx.showLoading({
      title: '保存中',
      mask: true
    })
    wx.saveImageToPhotosAlbum({
      filePath: that.data.posterImage,
      success: function () {
        wx.hideLoading()
        wx.showModal({
          content: '保存成功',
          showCancel: false
        })
      },
      fail: function () {
        wx.hideLoading()
        wx.showModal({
          content: '保存失败',
          showCancel: false
        })
      }
    })
  },
  getSaveState: function () {
    var that = this
    wx.getSetting({
      success: function (res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success: function () {
              that.savePoster()
            },
            fail: function () {
              wx.showModal({
                title: '获取权限失败',
                content: '是否打开权限设置，允许小程序保存图片到您的相册',
                success: function (res) {
                  if (res.confirm) {
                    wx.openSetting({
                      success: function (setRes) {
                        if (setRes.authSetting['scope.writePhotosAlbum']) {
                          setTimeout(function () {
                            that.savePoster()
                          })
                        }
                      }
                    })
                  } else {
                    wx.showModal({
                      content: '请打开图片保存权限，否则将无法保存图片',
                      showCancel: false
                    })
                  }
                }
              })
            }
          })
        } else {
          that.savePoster()
        }
      }
    })
  }
})