在一些项目中有些需求会需要分享海报的功能，今天呢就为大家分享一下我在用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>
好了，基本的一个开发流程就是这样了，如果对你有用请点赞收藏哦，谢谢支持！
有问题或者有更好的建议也可以下方评论区评论，谢谢