uniapp实现生成海报功能

在一些项目中有些需求会需要分享海报的功能，今天呢就为大家分享一下我在用uniapp开发中使用的一款插件，可以任意的布局。超级好用

文档链接安排上：https://ext.dcloud.net.cn/plugin?id=2389

引入插件

在上面的链接中下载插件然后引入

import lPainter from '@/components/lime-painter/'//存放插件的路径，可能跟我的不一样
export default {components: {lPainter}
}

基本用法

board 画板需要传一段样式的JSON对象,画板属性width、height、及元素数组views, 目前元素类型有view、text、image、qrcode
css 对象里的位置都是相对于画板的绝对定位，支持rpx、px

建议另外新建一个文件存在海报
我就新建了一个canvas-poster.vue

//canvas-poster.vue
<template><view>//isRenderImage绘制完之后生成图片 生成图片后的回调函数<l-painter :board="base" isRenderImage @success='changeImg'/></view>
</template>

简单试试在画板上布局排版自己想要的效果

import lPainter from '@/components/lime-painter/'
export default {components: {lPainter}
}
export default {data() {return {base: {width: '686rpx',height: '130rpx',views: [{type: 'view',css: {left: '0rpx',top: '0rpx',background: '#07c160',width: '120rpx',height: '120rpx'}},{type: 'text',css: {left: '180rpx',top: '18rpx',background: '#1989fa',width: '80rpx',height: '80rpx',transform: 'transform: rotate(50deg)'}}]}}}
}

使用qrcode二维码的时候需要注意一点
需要在https://gitee.com/liangei/lime-painter/blob/master/qrcode.js上下载qrcode.js覆盖插件目录的qrcode.js才生效

{type: 'qrcode',text: '二维码内容',css: {left: '380rpx',top: '230rpx',width: '200rpx',height: '200rpx',color: '#1989fa',backgroundColor: 'rgba(25,137,250,.1)'//二维码底色border: '20rpx solid rgba(25,137,250,.1)',}
}

最后获取图片

methods: {changeImg(imgUrl) {//如果是在主页面使用这插件可以直接定义一个变量保存图片地址this.imgUrl=imgUrl//如果是想我一样另外进行封装就直接用$emit传递给父组件this.$emit('onChange',imgUrl)}
}

在父组件中就可以直接调用接口获取到imgUrl

//父组件
<template><view>//isRenderImage绘制完之后生成图片 生成图片后的回调函数<canvas-poster @onChange='getImgUrl'></canvas-poster><u-button type="primary" @click='savePicture'>保存图片</u-button></view>
</template><script>
export default {data（）{return {imgUrl:''}}，methods: {changeImg(imgUrl) {this.imgUrl=imgUrl}savePicture(){//下载图片到系统相册中uni.saveImageToPhotosAlbum({filePath: this.imgUrl,success: function () {console.log('保存成功');}});}}
}</script>

好了，基本的一个开发流程就是这样了，如果对你有用请点赞收藏哦，谢谢支持！
有问题或者有更好的建议也可以下方评论区评论，谢谢