微信小程序生成分享海报组件

效果图

官方文档地址你看着!!!
代码文档上都有 这里面有个坑 这里面的像素单位是 像素点 是iOS的像素比

wxml

<!--index.wxml-->
<view class="container">
  <image src="{{shareImage}}" class="share-image"></image>
  <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>

  <button bind:tap="eventDraw">绘制</button>
  <button bind:tap="eventSave">保存到本地</button>
</view>

js

//index.js

Page({
  data: {
    painting: {},
    shareImage: ''
  },
  onLoad () {
    // this.eventDraw()
  },
  eventDraw () {
    wx.showLoading({
      title: '绘制分享图片中',
      mask: true
    })
    this.setData({
      painting: {
        width: 375,
        height: 555,
        clear: true,
        views: [
          {   //海报背景图
            type: 'image',
            url: 'https://oss.tool.lu/cache/202111/09/10202841bz8nb01ivyipni.png.optim.png',
            top: 0,
            left: 0,
            width: 375,
            height: 555
          },
          {  //用户头像
            type: 'image',  
            url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-eb6852d04376f8abd86c4eb3e3746fa2_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639013821&t=00bc9807fb2e18895d9af1a823c1377c',
            top: 67.5,
            left: 45,
            width: 55,
            height: 55
          },
          {
            type: 'text',
            content: '您的好友【kuckboy】',
            fontSize: 16,
            color: '#402D16',
            textAlign: 'left',
            top: 75.5,
            left: 106,
            bolder: true
          },
          {
            type: 'text',
            content: '发现好东西，邀请你0元免费拿！',
            fontSize: 15,
            color: '#563D20',
            textAlign: 'left',
            top: 100.5,
            left: 106
          },
          { //商品图
            type: 'image',
            url: 'https://www.maccosmetics.com.cn/media/export/cms/navigation_touts_2020/chunbu07008-1.jpg',
            top: 133,
            left: 63.5,
            width: 247,
            height: 167
          },
          {  //二维码
            type: 'image',  
            url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimga.mumayi.com%2Fapplets%2Fimg_mumayi%2F2018%2F11%2F30%2F0%2F363%2Fqrcode_363.png&refer=http%3A%2F%2Fimga.mumayi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639013909&t=d2dabb6c52716e47438cd83172c8125a',
            top: 413,
            left: 68,
            width: 68,
            height: 68
          },
          {
            type: 'text',
            content: '正品MAC魅可口红礼盒生日唇膏小辣椒Chili西柚情人',
            fontSize: 16,
            lineHeight: 21,
            color: '#383549',
            textAlign: 'left',
            top: 375,
            left: 55,
            width: 260,
            MaxLineNumber: 2,
            breakWord: true,
            bolder: true
          },
          {
            type: 'text',
            content: '￥10.00',
            fontSize: 19,
            color: '#e33960',
            textAlign: 'left',
            top: 327,
            left: 140,
            bolder: true
          },
          {
            type: 'text',
            content: '88',
            fontSize: 23,
            color: '#ffffff',
            textAlign: 'left',
            top: 330,
            left: 87,
            bolder: true
          },
          {
            type: 'text',
            content: '原价:￥128.00',
            fontSize: 13,
            color: '#7E7E8B',
            textAlign: 'left',
            top: 311,
            left: 140,
            textDecoration: 'line-through'
          },
          {
            type: 'text',
            content: '长按识别图中二维码帮我砍个价呗~',
            fontSize: 14,
            color: '#383549',
            textAlign: 'left',
            top: 430,
            left: 145.5,
            lineHeight: 20,
            MaxLineNumber: 2,
            breakWord: true,
            width: 125
          }
        ]
      }
    })
  },
  eventSave () {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareImage,
      success (res) {
        wx.showToast({
          title: '保存图片成功',
          icon: 'success',
          duration: 2000
        })
      }
  })
  },
  eventGetImage (event) {
    console.log(event)
    wx.hideLoading()
    const { tempFilePath, errMsg } = event.detail
    if (errMsg === 'canvasdrawer:ok') {
      this.setData({
        shareImage: tempFilePath
      })
    }
  }
})

wxss

.share-image {
  width: 600rpx;
  height: 888rpx;
  margin: 0 75rpx;
  border: 1px solid black;
  /* overflow: hidden */
}

button {
  margin-top: 20rpx;
}

json

{
  "usingComponents": {
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
  }
}

page的同级目录components进行引入资源

背景图素材

在最后附上我的QQ: 16214040474 有问题的话可以找我一同探讨