1.先去下载插件github 下载 https://github.com/Kujiale-Mobile/Painter 下载好了把painter整个文件放在components里面

index.json

{
  "usingComponents": {
    "painter":"/components/painter/painter"
  }
}

index.wxml

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<button bind:tap='createPoster'>生成海报</button>
<image class="poster" src="{{imgURL}}" mode="cover"></image>
<painter 
	wx-if="{{showPainter}}"
    palette="{{template}}"
    bind:imgOK="onImgOK" 
    />

index.js

Page({
  data: {
    template: {},
    imgURL:'',
	showPainter:false,
	avatarUrl:''
  },
  createPoster(){
    this.getPattle()
  },
  onImgOK(e) {
    console.log("onImgOK")
    console.log(e.detail.path)
    this.setData({
      imgURL: e.detail.path
    })
  },
  getPattle(){
	  let _this = this
	  _this.setData({
	    template: {
	      width:"750rpx",
	      height:"1624rpx",
	      views:[
	         {
	            type: 'image',
	            url: "https://campaign.uglobal.com.cn/ikea/images/havemedal.jpg",
	            css: {
	              top: '0rpx',
	              left: '0px',
	              width: '750rpx',
	              height: '1624rpx'
	            }
	          },{
	            type: 'image',
	            url: _this.data.avatarUrl,
	            css: {
	              top: '450rpx',
	              left: '270rpx',
	              width: '200rpx',
	              height: '200rpx',
	              borderRadius: '100rpx',
	              borderWidth: "10rpx",
				  borderColor: '#fed931'
	            }
	          }
	      ]
	    },
		showPainter:true
	  })
  },
  getUserInfo: function(e) {
    console.log(e)
    this.setData({
	  avatarUrl:e.detail.userInfo.avatarUrl
    })
  }
})

注意：
网络图片真机显示空白请检查 微信公众平台 服务器域名里面的安全域名有没有添加
微信头像显示空白 请添加 https://thirdwx.qlogo.cn; 添加域名后重新启动项目就可以成功显示了。