聊聊怎么利用小程序生成海报(插件推荐)
时间:2021-09-18 来源:互联网
今天PHP爱好者给大家带来怎么利用小程序生成海报?下面本篇文章就来给大家推荐一个海报生成插件--painter,看看利用它怎么生成海报,希望对大家有所帮助!
小程序原生代码生成海报
第一步:
下载包,并将painter包放在components目录下
https://github.com/Kujiale-Mobile/Painter
第二步:
使用页面的json文件中引入
{
"usingComponents": {
"painter":"/components/painter/painter"
}
}
第三步:
使用页面的wxml
接收海报的图片容器
<image mode="widthFix" src="{{ posterImg }}" id="goods_qr-code" alt />
<painter wx-if="{{showPainter}}" palette="{{data}}" bind:imgOK="firstImg" />
palette 字段作为画图数据的数据源, 图案数据以 json 形式存在
widthPixels 强制指定生成的图片的像素宽度
绘图完成后,可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片或失败的原因
第四步:
使用页面的js
生成海报的方法(){
this.setData({
template: {
width: "750rpx",
1500rpx",
views: [
{
type: 'image',
url: 图片路路径,
css: {
top: '10rpx',
left: '10rpx',
right: '10rpx',
width: '730rpx',
1500rpx'
}
}
]
}
})
}
海报生成完毕自动调用
firstImg(e) {
console.log(e.detail.path);
this.setData({
posterImg: e.detail.path
})
},
插件介绍及官网:Painter生成海报
https://codechina.csdn.net/mirrors/Kujiale-Mobile/Painter?utm_source=csdn_github_accelerator
原文地址:https://juejin.cn/post/6995356720125968398
作者:黄勇超
以上就是聊聊怎么利用小程序生成海报(插件推荐)的详细内容,更多请关注php爱好者其它相关文章!
-
TRX币历史最低价和最高价统计 2025-06-23
-
茶壶:我嘴大,但我守得住秘密(壶嘴)。 2025-06-23
-
TRX币首次发行方式及众筹细节 2025-06-23
-
布怕一万,纸怕万一(布/不怕,纸/只怕)。 2025-06-23
-
TRX币流通市值和持币地址数量统计 2025-06-23
-
TRX币合约杠杆倍数及支持合约交易的平台介绍 2025-06-23