微信小程序生成海报Canvas

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

这里是生成好的效果图（可以根据你的UI去灵活使用）

开始使用咯

父组件调用

Page({
  imagePath: '',
  isSave: false,
  data: {
    template: {},
    canvasJson: {
      width: '636rpx',
      height: '920rpx',
      background: '#fff',
      views: [
        {
          type: 'image',
          url: '背景图片路径(根据自己需求给出路径)',
          css: {
            width: '100%',
            height: '100%',
            bottom: '0',
            left: '0',
            right: '0',
            top: 0,
          },
        },
        {
          type: 'image',
          url: '画布图片块路径(根据自己需求给出路径)',
          css: {
            width: '549rpx',
            height: '360rpx',
            left: '42rpx',
            top: '56rpx',
            borderRadius: '10rpx 10rpx 0 0',
          },
        },
        {
          id: 'my-text-id',
          type: 'text',
          text: "快快快，兄弟们雄起呀，带你飞进黑土堆",
          css: [{
            width: '450rpx',
            top: `540rpx`,
            left: '90rpx',
            fontWeight: 'bold',
            fontSize: '30rpx',
            maxLines: 1,
          }],
        },
        {
          type: 'image',
          url: '画布图片块路径(根据自己需求给出路径)',
          css: [{
            bottom: '60rpx',
            right: '58rpx',
            width: '200rpx',
            height: '200rpx',
          }]
        }
      ]
    }
  },
  // 海报生成成功回调
  onDidShow() {
    console.log('海报生成成功回调')
  },
  // 海报保存成功回调
  onImgOK(e) {
    this.imagePath = e.detail.path
    this.setData({
      image: this.imagePath
    })
    if (this.isSave) {
      this.saveImage(this.imagePath)
    }
  },
  // 保存海报回调
  saveImage(imagePath = '') {
    if (!this.isSave) {
      this.isSave = true;
      this.setData({
        paintPallette: this.data.template,
      })
    } else if (imagePath) {
      this.isSave = false;
      wx.saveImageToPhotosAlbum({
        filePath: imagePath,
      })
    }
  },
  onReady: function() {
    this.setData({
      template: this.data.canvasJson,
    })
  }
})

<view class="container">
  <button bind:tap='saveImage'>保存</button>
  <painter 
    widthPixels="1000"
    customStyle='margin: 0 auto;'
    dancePalette="{{template}}"
    palette="{{paintPallette}}"
    bind:imgOK="onImgOK" 
    bind:didShow="onDidShow"
    />
</view>

子组件的资源已经上传到个人资源里边，可供直接下载使用，你想要的海报就此实现，你还在等什么…

子组件的资源通道