小程序使用Painter生成海报

文档
js源码

https://pan.baidu.com/s/10os-vr0mWsBwx08oXK2caQ 
提取码: y1tw

我是直接下载github源码放到项目组件中

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

注意踩过的坑：下面painter 这行代码放在最外层，不能放在view弹窗里面，否则弹窗生成第二次生成的时候会破板.

<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>

纯Json驱动生成海报，使用很方便

Page({
  data: {
    template: {},
    image: "",
    width: 750,
    height: 1334,
    frameWidth: 690,
    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: '30px',
              width: this.data.frameWidth + 'px',
              height: '1000px',
              borderRadius: '10px',
              color: '#fff',
            },
          }, {
            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: this.data.frameWidth / 2 - 125 + 'px',
              fontSize: '30px',
              color: "#000",
              align: 'center',
              maxLines: 1,//限制行数
            },
          }, {
            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: this.data.frameWidth / 2 - 125 + 'px',
              fontSize: '30px',
              color: "#000",
              align: 'center',
            },
          }, {
            type: 'text',
            text: this.data.askText + this.data.answerText,
            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.getSetting({
      success: (set) => {
        wx.saveImageToPhotosAlbum({
          filePath: this.data.image,
          success: (res) => {
            if (res.errMsg == "saveImageToPhotosAlbum:ok") {
              wx.showToast({
                title: '保存成功',
              });
            }
          }
        })
        if (set.authSetting['scope.writePhotosAlbum'] == false) {
          wx.openSetting()
        }
      }
    })
  },

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