小程序生成海报插件painter（原生小程序版）
发布时间
阅读量：
阅读量
主要功能包括：
下载并配置插件Painter至components/painter/painter
提供获取头像昵称、生成海报等功能
代码中使用wx组件进行操作，包括显示加载中、获取图片信息等
注意事项：检查微信公众平台服务器域名安全设置，确保图片加载完成后才生成海报
首先，建议前往GitHub平台获取插件，访问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
let bg = "https://campaign.uglobal.com.cn/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.微信头像显示空白 请添加 https://thirdwx.qlogo.cn; 添加域名后重新启动项目就可以成功显示了。
3.确保在图片加载完再生成海报（getImageInfo…）
全部评论 (0)
还没有任何评论哟~