小程序自定义分享时候的图片中文字的内容

这个需求大家肯定不陌生吧，对于分享的时候如何去实现分享的图片中的文字，要实时的展示用户填入的信息，或者说图片上填入当前时间，针对这个功能该如何实现呢？

----------我选择用canvas画图来实现，下面有完整代码片段可查看-----------

这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能）

首先我们新增一个自定义组件，在该组件的json中引入painter（开源组件）

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

然后组件的WXML (代码片段在最后)

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

重点来了 JS (代码片段在最后)

Component({
  properties: {
    // 是否开始绘图
    isCanDraw: {
      type: Boolean,
      value: false,
      observer(newVal) {
        newVal && this.handleStartDrawImg()
      }
    },
    //信息收集截止时间
    time: {
      type: String,
      value: ''
    }
  },
  data: {
    imgDraw: {}, // 绘制图片的大对象
    sharePath: '' // 生成的分享图
  },
  methods: {
    handleStartDrawImg() {
      // wx.showLoading({
      //   title: '生成中'
      // })
      this.setData({
        imgDraw: {
          width: '750rpx',
          height: '750rpx',
          views: [
            {
              type: 'image',
              url: 'https://cdn.17wenhua.com/partyMiniProgram/invite/%E9%82%80%E8%AF%B7%E7%9A%84%E9%A1%B5%E9%9D%A21.png',
              css: {
                top: '32rpx',
                left: '30rpx',
                right: '32rpx',
                width: '688rpx',
                height: '540rpx',
                borderRadius: '16rpx'
              },
            },
            {
              type: 'text',
              text: this.data.time || '暂无时间信息~',
              css: {
                top: '508rpx',
                left: '335rpx',
                width: '400rpx',
                height: '400rpx',
                color:'#fff',
                fontSize:'30rpx'
                // borderWidth: '6rpx',
                // borderColor: '#FFF',
                // borderRadius: '96rpx'
              }
            },
          ]
        }
      })
    },
    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') 
      // 传递生成的图片路径给外部
      this.triggerEvent('imagePath', { path: e.detail.path });
    }
  }
})

那么我们该如何引用呢？

首先json里引用我们封装好的组件share-box

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

点击生成分享图

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

调用的地方：

const app = getApp()

Page({
  data: {
    isCanDraw: false，
    imagePath：''
  },
  // 组件内部关掉或者绘制完成需重置状态
  handleClose() {
    this.setData({
      isCanDraw: !this.data.isCanDraw
    })
  },
  // 组件内部关掉或者绘制完成需重置状态
   handleClose() {
    this.setData({
      isCanDraw: true
    })
  },

  // 拿到图片路径
onImagePath(event) {
  this.setData({
    imagePath: event.detail.path
  })
  console.log('生成的图片路径：', this.data.imagePath);
},
    })
  }
})

示例代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5