1.先去下載插件github 下載 https://github.com/Kujiale-Mobile/Painter 下載好了(le／liǎo)把painter整個(gè)文件放在(zài)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
    })
  }
})

注意：
網絡圖片真機顯示空白請檢查 微信公衆平台 服務器域名裏面的(de)安全域名有沒有添加
微信頭像顯示空白 請添加 https://thirdwx.qlogo.cn; 添加域名後重新啓動項目就(jiù)可以(yǐ)成功顯示了(le／liǎo)。