1.先去下载插件github 下载 /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
let bg = "/ikea/images/havemedal.jpg",avatarUrl;Page({data: {template: {},imgURL:'',showPainter:false},async createPoster(){wx.showLoading({title: '正在为您生成海报',mask: true});bg = await this.getImageInfo(bg)avatarUrl = await this.getImageInfo(avatarUrl)//图片加载完成this.getPattle()},onImgOK(e) {wx.hideLoading();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: bg ,css: {top: '0rpx',left: '0px',width: '750rpx',height: '1624rpx'}},{type: 'image',url: avatarUrl,css: {top: '450rpx',left: '270rpx',width: '200rpx',height: '200rpx',borderRadius: '100rpx',borderWidth: "10rpx",borderColor: '#fed931'}}]},showPainter:true})},getUserInfo: function(e) {console.log(e)avatarUrl = e.detail.userInfo.avatarUrl},async getImageInfo(url){return new Promise((resolve, reject) => {wx.getImageInfo({src: url,success (res) {console.log(url + '======' + res.path)resolve(res.path)},fail (err) {console.log(err)wx.showToast({title:"网络异常",icon:"none"})reject(err)}})})}})
注意：
1.网络图片真机显示空白请检查 微信公众平台 服务器域名里面的安全域名有没有添加
2.微信头像显示空白 请添加 ; 添加域名后重新启动项目就可以成功显示了。
3.确保在图片加载完再生成海报（getImageInfo…）
