微信小程序使用Painter组件生成海报

{
  "usingComponents": {
    "painter": "../../component/painter/painter"
  }
}

<view class="box">
    <painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" />
    <image mode="widthFix" src="{{image}}" bindtap="previewImg" />
    <view class="save" hover-class="hoverClick" bindtap="getSave">保存图片</view>
</view>

Page({
  data: {
    template: {},
    image: "",
    width: 750,
    height: 1200,
    code: "https://sucai.suoluomei.cn/sucai_zs/images/20200509145410-%E9%A6%96%E5%9B%BE.jpg",
    askName: "周某",
    askAvatar: "https://sucai.suoluomei.cn/sucai_zs/images/20200523094058-1.jpg",
    answerName: "老师",
    answerAvatar: "https://sucai.suoluomei.cn/sucai_zs/images/20200523094058-1.jpg",
    askText: "问题问题问题问题问题问题问题问题问题问题问题问题问题问题",
    answerText: "答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案",
    time: "2020_4_1"
  },

  onLoad() {
    this.getDraw()
  },

  getDraw() {
    wx.showLoading({
      title: '正在努力生成中',
    })
    this.setData({
      template: {
        background: '#30C4A7',
        width: this.data.width + 'px',
        height: this.data.height + 'px',
        views: [{
            type: 'text',
            text: this.data.askName + " @精致女主圈",
            css: {
              top: '30px',
              left: '33px',
              fontSize: '30px',
              color: "#fff"
            },
          }, {
            type: 'text',
            text: "12580+人 都在这里提问",
            css: {
              top: '90px',
              left: '33px',
              fontSize: '28px',
              color: "#fff"
            },
          }, {
            type: 'image',
            url: this.data.code,
            css: {
              top: '30px',
              right: '30px',
              width: '126px',
              height: '126px',
              borderRadius: '10px',
              mode: "widthFix"
            },
          }, {
            type: 'rect',
            css: {
              top: '180px',
              left: this.data.width / 2 + "px",
              width: '690px',
              height: '1000px',
              borderRadius: '10px',
              color: '#fff',
              align: 'center',
            },
          }, {
            type: 'image',
            url: this.data.askAvatar,
            css: {
              top: '230px',
              left: '174px',
              width: '100px',
              height: '100px',
              borderRadius: '50px',
              mode: "aspectFill"
            },
          }, {
            type: 'text',
            text: this.data.askName,
            css: {
              top: '350px',
              left: 690 / 2 - 125 + 'px',
              fontSize: '30px',
              color: "#000",
              align: 'center',
            },
          }, {
            type: 'image',
            url: "https://sucai.suoluomei.cn/sucai_zs/images/20200523095111-54.png",
            css: {
              top: '280px',
              left: '313px',
              width: '123px',
              mode: "widthFix"
            },
          }, {
            type: 'text',
            text: "提问",
            css: {
              top: '250px',
              left: '347px',
              fontSize: '30px',
              color: "#000"
            },
          }, {
            type: 'image',
            url: this.data.answerAvatar,
            css: {
              top: '230px',
              right: '174px',
              width: '100px',
              height: '100px',
              borderRadius: '50px',
              mode: "aspectFill"
            },
          }, {
            type: 'text',
            text: this.data.answerName,
            css: {
              top: '350px',
              right: 690 / 2 - 125 + 'px',
              fontSize: '30px',
              color: "#000",
              align: 'center',
            },
          }, {
            type: 'text',
            text: this.data.askText,
            css: {
              maxLines: 2,
              lineHeight: "40px",
              width: "629px",
              top: '420px',
              left: "60px",
              fontSize: '30px',
              color: "#000"
            },
          }, {
            type: 'text',
            text: this.data.answerText,
            css: {
              maxLines: 7,
              lineHeight: "40px",
              width: "629px",
              top: '550px',
              left: "60px",
              fontSize: '30px',
              color: "#000"
            },
          }, {
            type: 'text',
            text: this.data.time,
            css: {
              top: '850px',
              right: "60px",
              fontSize: '28px',
              color: "#666666"
            },
          },
          {
            type: 'image',
            url: this.data.code,
            css: {
              top: '900px',
              left: this.data.width / 2 - 100 + 'px',
              width: '200px',
              height: '200px',
              mode: "aspectFill"
            },
          },
          {
            type: 'text',
            text: "长按或保存二维码查看原文",
            css: {
              top: '1120px',
              left: this.data.width / 2 + 'px',
              fontSize: '28px',
              color: "#666666",
              align: 'center',
            },
          },
        ],
      }
    })
  },
  // 生成成功
  canvasSuc(e) {
    console.log(e)
    wx.hideLoading()
    this.setData({
      image: e.detail.path
    })
  },
  
   getSave() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.image,
      success: (res) => {
        wx.showToast({
          title: '保存成功',
        });
      }
    })
    wx.getSetting({
      success: (set) => {
        if (set.authSetting['scope.writePhotosAlbum'] == false) {
          wx.openSetting()
        }
      }
    })
  },

  previewImg() {
    wx.previewImage({
      current: this.data.image,
      urls: [this.data.image]
    })
  },
})