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>

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