The applet generates posters and downloads them

Reference article demo: https://developers.weixin.qq.com/s/J38pKsmK7Qw5
Visual editing code tool: https://lingxiaoyi.github.io/painter-custom-poster/

• First, we add a custom component and introduce the painter in the component's json

{
  "component": true,
  "usingComponents": {
    "painter": "/painter/painter"
  }
}

• Then the component's WXML (the code snippet is at the end)

// 将该组件定位在屏幕之外，用户查看不到。
<painter style="position: absolute; top: -9999rpx;" palette="{
   
   {imgDraw}}" bind:imgOK="onImgOK" />

重点来了 JS (代码片段在最后)
Component({
  properties: {
    // 是否开始绘图
    isCanDraw: {
      type: Boolean,
      value: false,
      observer(newVal) {
        newVal && this.handleStartDrawImg()
      }
    },
    // 用户头像昵称信息
    userInfo: {
      type: Object,
      value: {
        avatarUrl: '',
        nickName: ''
      }
    }
  },
  data: {
    imgDraw: {}, // 绘制图片的大对象
    sharePath: '' // 生成的分享图
  },
  methods: {
    handleStartDrawImg() {
      wx.showLoading({
        title: '生成中'
      })
      this.setData({
        imgDraw: {
          width: '750rpx',
          height: '1334rpx',
          background: 'https://qiniu-image.qtshe.com/20190506share-bg.png',
          views: [
            {
              type: 'image',
              url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg',
              css: {
                top: '32rpx',
                left: '30rpx',
                right: '32rpx',
                width: '688rpx',
                height: '420rpx',
                borderRadius: '16rpx'
              },
            },
            {
              type: 'image',
              url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png',
              css: {
                top: '404rpx',
                left: '328rpx',
                width: '96rpx',
                height: '96rpx',
                borderWidth: '6rpx',
                borderColor: '#FFF',
                borderRadius: '96rpx'
              }
            },
            {
              type: 'text',
              text: this.data.userInfo.nickName || '青团子',
              css: {
                top: '532rpx',
                fontSize: '28rpx',
                left: '375rpx',
                align: 'center',
                color: '#3c3c3c'
              }
            },
            {
              type: 'text',
              text: `邀请您参与助力活动`,
              css: {
                top: '576rpx',
                left: '375rpx',
                align: 'center',
                fontSize: '28rpx',
                color: '#3c3c3c'
              }
            },
            {
              type: 'text',
              text: `宇宙最萌蓝牙耳机测评员`,
              css: {
                top: '644rpx',
                left: '375rpx',
                maxLines: 1,
                align: 'center',
                fontWeight: 'bold',
                fontSize: '44rpx',
                color: '#3c3c3c'
              }
            },
            {
              type: 'image',
              url: 'https://qiniu-image.qtshe.com/20190605index.jpg',
              css: {
                top: '834rpx',
                left: '470rpx',
                width: '200rpx',
                height: '200rpx'
              }
            }
          ]
        }
      })
    },
    onImgErr(e) {
      wx.hideLoading()
      wx.showToast({
        title: '生成分享图失败，请刷新页面重试'
      })
      //通知外部绘制完成，重置isCanDraw为false
      this.triggerEvent('initData') 
    },
    onImgOK(e) {
      wx.hideLoading()
      // 展示分享图
      wx.showShareImageMenu({
        path:  e.detail.path,
        fail: err => {
          console.log(err)
        }
      })
      //通知外部绘制完成，重置isCanDraw为false
      this.triggerEvent('initData') 
    }
  }
})

So how do we cite it?
First, reference our encapsulated component share-box in json

{
  "usingComponents": {
    "share-box": "/components/shareBox/index"
  }
}

The following example is to generate a graph after obtaining the nickname of the user's avatar.

<button class="intro" bindtap="getUserInfo">点我生成分享图</button>
<share-box isCanDraw="{
   
   {isCanDraw}}" userInfo="{
   
   {userInfo}}"  bind:initData="handleClose" />

Where it is called:

const app = getApp()

Page({
  data: {
    isCanDraw: false
  },
  // 组件内部关掉或者绘制完成需重置状态
  handleClose() {
    this.setData({
      isCanDraw: !this.data.isCanDraw
    })
  },
  getUserInfo(e) {
    wx.getUserProfile({
      desc: "获取您的头像昵称信息",
      success: res => {
        const { userInfo = {} } = res
        this.setData({
          userInfo,
          isCanDraw: true // 开始绘制海报图
        })
      },
      fail: err => {
        console.log(err)
      }
    })
  }
})

Finally, the custom component for drawing the sharing image is completed~ The rendering is as follows:

tips：

Text centering implementation can be seen in the code snippet text wrapping implementation (maxLines) only needs to set the width, if maxLines is set to 1, then more than one line will be displayed as an ellipsis

Code snippet: https://developers.weixin.qq.com/s/J38pKsmK7Qw5