所属分类:php教程
程序员必备接口测试调试工具:立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试,同时在线协作,内容实时同步
第一步:
下载包,并将painter包放在components目录下
https://github.com/Kujiale-Mobile/Painter
登录后复制
【相关学习推荐:小程序开发教程】
第二步:
使用页面的json文件中引入
{
"usingComponents": {
"painter":"/components/painter/painter"
}
}
登录后复制
第三步:
使用页面的wxml
接收海报的图片容器
palette 字段作为画图数据的数据源, 图案数据以 json 形式存在
widthPixels 强制指定生成的图片的像素宽度
绘图完成后,可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片或失败的原因
登录后复制
第四步:
使用页面的js
生成海报的方法(){
this.setData({
template: {
width: "750rpx",
height: "1500rpx",
views: [
{
type: 'image',
url: 图片路路径,
css: {
top: '10rpx',
left: '10rpx',
right: '10rpx',
width: '730rpx',
height: '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
作者:黄勇超
更多编程相关知识,请访问:编程视频!!
以上就是聊聊怎么利用小程序生成海报(插件推荐)的详细内容,更多请关注zzsucai.com其它相关文章!