微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用

微信小程序-运用painter插件生成海报–比canvas好用

先放插件地址：https://github.com/Kujiale-Mobile/Painter
还有个可视化把海报生成代码的地址：https://lingxiaoyi.github.io/painter-custom-poster/

有这两个你的海报已经基本完成一大半了，比苦苦的用canvas硬画海报舒服太多了！！！

把这个插件放在你小程序项目component文件下，然后在你需要的地方json文件里引入一下

"usingComponents": {"painter": "/component/painter/painter"}

然后把你在可视化生成的海报代码复制一下，在需要用的那个文件目录生成一个canvas.js（当然你可以随意取名）

然后在对应page页面的js文件里引入这个canvas.js文件，在wxml文件里使用painter组件

<!-- 这个是生成的海报图片预览 -->
<image src="{{src}}" style="height:980rpx" mode="aspectFit" class="canvas-img"></image>
<!-- 这个是painter组件使用 -->
<painter palette="{{wxml}}" style="position: absolute; top: -9999rpx;"  bind:imgOK="onImgOK" />
<!-- 生成海报按钮 -->
<button bindtap="painterBtn">生成海报</button>

然后paintertest.js文件里

import canvas from './canvas'
// 生成海报点击事件painterBtn() {this.setData({wxml: canvas()})wx.showLoading({title: '正在生成中...',})},// panter onImgOK(e) {console.log(e);this.setData({src: e.detail.path})wx.hideLoading()},

到此也就基本完成了

如果想动态给海报里传参

// paintertest.js
import canvas from './canvas'
// 生成海报点击事件painterBtn() {let name="我是传递的参数";this.setData({wxml: canvas(name)  // 在此传递参数})wx.showLoading({title: '正在生成中...',})},

// canvas.js
module.exports = data => {return ({"width": "620px","height": "980px","background": "#ffffff","views": [{"type": "text","text": data.name,"css": {"color": "#191846","background": "rgba(0,0,0,0)","width": "536px","top": "486px","left": "41px","rotate": "0","borderRadius": "","borderWidth": "","borderColor": "#000000","shadow": "","fontSize": "30px","lineHeight": "43px","fontWeight": "normal","textStyle": "fill","textDecoration": "none","fontFamily": "","textAlign": "left"}},]});
}

以上基本可以解决你大部分的海报绘制需求

微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用相关推荐

【微信小程序】用painter插件生成海报分享朋友圈简单教程
第一步:去Git下载插件 1.这是核心插件需要下载全部内容 https://github.com/Kujiale-Mobile/PainterCore 2.官方文档 https://github.c ...
微信小程序使用Painter组件生成海报
文档地址我是直接下载github源码放到项目组件中 {"usingComponents": {"painter": "../../component ...
【小程序】728- 小程序如何生成海报分享朋友圈
作者:小白 https://segmentfault.com/a/1190000019083548 项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录, ...
小程序如何生成海报分享朋友圈，android移动开发技术与应用
openStatus = false console.log('请设置允许访问相册') wx.showToast({ title: '请设置允许访问相册', icon: 'none' }) } }) ...
一个生日微信小程序生日动画_生日当天发朋友圈的文案生日快乐微信小句子...
1.承蒙时光不弃,终究又长大了一岁,感谢每个阶段不同的自己. 2.希望我以后的人生平安喜乐,得偿所愿. 3.又长大了一岁,要更勇敢,少发脾气,按时睡觉,不要乱想. 4.要长大,要乖,要不负众望,生日快 ...
微信小程序任意指定页面生成二维码
在日常微信小程序运营中,文章,和朋友圈海报内总会用到微信小程序特定页面二维码第一步:登录微信公众平台https://mp.weixin.qq.com/ 第二步:点击右上角工具->生成小程序码 ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...

微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用

微信小程序-运用painter插件生成海报–比canvas好用

微信小程序-运用painter插件生成海报分享朋友圈--比canvas好用相关推荐

最新文章

热门文章