uni-app生成海报并分享

最新推荐文章于 2025-06-16 11:10:36 发布

培根芝士

最新推荐文章于 2025-06-16 11:10:36 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/watson2017/article/details/130198774

uni-app 专栏收录该内容

15 篇文章

订阅专栏

lime-painter是一个DCloud插件市场的canvas海报组件，提供了Template和JSON两种方式来更方便地绘制海报。用户可以通过定义组件的css属性和内容来创建复杂的海报设计，包括文本、图像、二维码等元素。组件还支持自动生成图片并进行保存或分享操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

lime-painter是一款canvas海报组件，可以更轻松的生成海报

海报画板 - DCloud 插件市场一款canvas海报组件，更优雅的海报生成方案https://ext.dcloud.net.cn/plugin?id=2389插件提供 JSON 及 Template 的方式绘制海报

1、Template方式

提供l-painter-view、l-painter-text、l-painter-image、l-painter-qrcode四种类型组件
通过 css 属性绘制样式，与 style 使用方式保持一致。

<l-painter>
//如果使用Template出现顺序错乱，可使用`template` 等所有变量完成再显示
<template v-if="show">
    <l-painter-view
        css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"
    ></l-painter-view>
    <l-painter-text
      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
      css="text-align:center; padding-top: 20rpx; text-decoration: line-through "
    />
    <l-painter-image
      src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
      css="width: 200rpx; height: 200rpx"
    />
    <l-painter-qrcode
      text="limeui.qcoon.cn"
      css="width: 200rpx; height: 200rpx"
    />
<template>
</l-painter>

2、JSON方式

在 json 里四种类型组件的type为view、text、image、qrcode
通过 board 设置海报所需的 JSON 数据进行绘制或ref获取组件实例调用组件内的render(json)
所有类型的 schema 都具有css字段，css 的 key 值使用驼峰如：lineHeight

<l-painter :board="poster"/>

data() {
    return {
        poster: {
            css: {
                // 根节点若无尺寸，自动获取父级节点
                width: '750rpx'
            },
            views: [
                {
                    type: "view",
                    css: {
                        background: "#07c160",
                        height: "120rpx",
                        width: "120rpx",
                        display: "inline-block"
                    }
                },
                {
                    type: 'text',
                    text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
                    css: {
                        // 设置居中对齐
                        textAlign: 'center',
                        // 设置中划线
                        textDecoration: 'line-through'
                    }
                },
                {
                    type: 'image',
                    src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
                    css: {
                        width: '200rpx',
                        height: '200rpx'
                    }
                },
                {
                    type: 'qrcode',
                    text: 'limeui.qcoon.cn',
                    css: {
                        width: '200rpx',
                        height: '200rpx',
                    }
                }
            ]
        }
    }
}

View 容器

类似于 div 可以嵌套承载更多的 view、text、image，qrcode 共同构建一颗完整的节点树
在 JSON 里具有 views 的数组字段，用于嵌套承载节点。

Text 文本

通过 text 属性填写文本内容。
支持\n换行符
支持省略号，使用 css 的line-clamp设置行数，当文字内容超过会显示省略号。
支持text-decoration

Image 图片

通过 src 属性填写图片路径。
图片路径支持：网络图片，本地 static 里的图片路径，缓存路径，字节的static目录是写相对路径
通过 css 的 object-fit属性可以设置图片的填充方式，可选值见下方 CSS 表格。
通过 css 的 object-position配合 object-fit 可以设置图片的对齐方式，类似于background-position，详情见下方 CSS 表格。
使用网络图片时：小程序需要去公众平台配置downloadFile域名
使用网络图片时：H5 和 Nvue 需要决跨域问题

Qrcode 二维码

通过text属性填写需要生成二维码的文本。
通过 css 里的 color 可设置生成码点的颜色。
通过 css 里的 background可设置背景色。
通过 css里的 width、height设置尺寸。

生成图片

1、方式1：

通过设置isCanvasToTempFilePath自动生成图片并在 @success 事件里接收海报临时路径

<l-painter isCanvasToTempFilePath pathType="url" @success="posterSuccess" hidden :board="poster" />
<image class="poster2" :src="canvasUrl" :show-menu-by-longpress="true" mode="widthFix" v-if="canvasUrl != null">
</image>

<script>
	export default {
		data() {
            return {
				canvasUrl: '',
				poster: {
                }
            }
        },
		methods: {
            posterSuccess($event) {
                this.canvasUrl = $event
                console.log(this.canvasUrl);
            },
        }
    }
</script>

海报绘制完毕后将生成的图片加载到image组件，通过设置show-menu-by-longpress属性，可以在image组件的长按时弹出菜单进行图片分享和识别二维码等操作。

2、方式2：

通过调用内部方法生成图片

<l-painter ref="painter" :board="poster" />

<script>
	export default {
		data() {
            return {
				poster: {
                }
            }
        },
		methods: {
            saveClick() {
				console.log('saveClick')
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 0.9,
					success: (res) => {
						console.log(res.tempFilePath);
						// 非H5 保存到相册
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '图片已保存'
								})
							},
							fail:function(){
								uni.showToast({
									icon: 'error',
									title: '图片保存失败'
								})
							}
						});
					},
				});
			},
        }
    }
</script>