uniapp使用l-painter画板,海报

最新推荐文章于 2025-02-14 12:02:15 发布

热心市民，小肖

最新推荐文章于 2025-02-14 12:02:15 发布

阅读量6.5k

点赞数 2

分类专栏：前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_37123106/article/details/122720919

版权

前端专栏收录该内容

7 篇文章

订阅专栏

在这里插入图片描述

Painter画板地址 http://liangei.gitee.io/limeui-docs/components/painter/
Painter画板在uniapp插件市场的地址：https://ext.dcloud.net.cn/plugin?id=2389
1，页面使用

<l-painter isRenderImage :width="'686rpx'" :height="'930rpx'" custom-style="position: fixed; top:10px; left: 500%;" ref="painter" @success="poster($event)"/>

2，导入组件

import lPainter from "@/components/lime-painter/index.vue"
components:{
	'l-painter':lPainter
},

3，画板样式

onShareLoad(){
	let that=this;
	let base={
		width: '686rpx',
		height: '950rpx',
		views: [
			{
				css: {
					width: '686rpx',
					height: '500rpx',
					display: "inline-block",
				},
				views: [
					{
						type: 'image',
						src: '../../static/bg1.png',
						mode: 'scaleToFill',
						css: {
							radius: '32rpx 32rpx 0rpx 0rpx',
							left: '0rpx',
							top: '0rpx',
							width: '686rpx',
							height: '500rpx',
						}
					}
				],
				type: "view"
			}, 
			{
				css: {
					width: '686rpx',
					height: '190rpx',
					display: "inline-block",
					background: '#ffffff',
				},
				views: [
					{
						type: 'text',
						text:'￥',
						css: {
							color: '#FE4F02',
							left: '30rpx',
							top: '550rpx',
							fontSize: '26rpx',
							lineHeight: '45rpx'
						}
					},
					{
						type: 'text',
						text:'1688.00',
						css: {
							color: '#FE4F02',
							left: '60rpx',
							top: '550rpx',
							fontWerght: 'bold',
							fontSize: '52rpx',
							lineHeight: '45rpx'
						}
					},
					{
						type: 'text',
						text: 'uniapp使用l-painter画板,海报uniapp使用l-painter画板,海报',
						css: {
							maxLines: 1,
							width: '630rpx',
							color: '#1A1A1A',
							left: '32rpx',
							top: '620rpx',
							fontSize: '32rpx',
							fontWerght: 'bold',
							lineHeight: '45rpx'
						}
					}
				],
				type: "view"
			},{
				css: {
					width: '686rpx',
					height: '52rpx',
					display: "inline-block",
				},
				views:[
					{
						type: 'image',
						src: '../../static/line.png',
						mode: 'scaleToFill',
						css: {
							left: '0rpx',
							top: '690rpx',
							width: '686rpx',
							height: '52rpx',
						}
					}
				],
				type: "view"
			},{
				css: {
					width: '686rpx',
					height: '180rpx',
					display: "inline-block",
					background: '#ffffff',
					radius: '0rpx 0rpx 32rpx 32rpx',
				},
				views:[
					{
						type: 'text',
						text: '购买热线',
						css: {
							left: '40rpx',
							top: '770rpx',
							fontSize: '28rpx',
							color:'#999999'
						}
					},
					{
						type: 'image',
						src:  '../../static/phone.png',
						mode: 'widthFix',
						css: {
							left: '184rpx',
							top: '770rpx',
							width: '36rpx',
							height: '36rpx',
							
						}
					},
					{
						type: 'text',
						text:  '手机号码',
						css: {
							left: '240rpx',
							top: '770rpx',
							fontSize: '28rpx',
							fontWerght: 'bold',
						}
					},
					{
						type: 'text',
						text:  '150-1234-4567',
						css: {
							left: '360rpx',
							top: '770rpx',
							fontSize: '28rpx',
							fontWerght: 'bold',
						}
					},
					{
						type: 'image',
						src:  '../../static/wechat.png',
						mode: 'widthFix',
						css: {
							left: '184rpx',
							top: '840rpx',
							width: '36rpx',
							height: '36rpx',
							
						}
					},
					{
						type: 'text',
						text:  '微信号码',
						css: {
							left: '240rpx',
							top: '840rpx',
							fontSize: '28rpx',
							fontWerght: 'bold',
						}
					},
					{
						type: 'text',
						text:  'csc1234',
						css: {
							left: '360rpx',
							top: '840rpx',
							fontSize: '28rpx',
							fontWerght: 'bold',
						}
					},
				],
				type: "view"
			},
			{
				css: {
					top:'360rpx',
					left:'480rpx',
					width: '170rpx',
					height: '220rpx',
					display: "inline-block",
					background: '#ffffff',
					borderRadius:'16rpx',
					boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
				},
				views:[
					{
						type: 'text',
						text: '产品详情二维码',
						css: {
							width:'280rpx',
							top: '540rpx',
							left: '488rpx',
							fontSize: '22rpx',
							color:'#1A1A1A'
						}
					},
					{
						type: 'image',
						src:  '../../static/logo.png',
						mode: 'widthFix',
						css: {
							top: '370rpx',
							left: '484rpx',
							width: '160rpx',
							height: '160rpx',
							borderRadius:'50%'
						}
					}
				],
				type:"view"
			}
		]
	}
	const painter = that.$refs.painter;
	painter.render(base);
},

4，下载海报，这里区分了h5下载和小程序下载

poster(event) {
	console.info(event)
	let path = event;
	let that=this;
	// #ifdef H5
	var eleLink = document.createElement('a');
	eleLink.download = "filename";
	eleLink.style.display = 'none';
	eleLink.href = path;
	document.body.appendChild(eleLink);
	eleLink.click();
	// 然后移除
	document.body.removeChild(eleLink);
	// #endif
	// #ifndef H5
	uni.saveImageToPhotosAlbum({
		filePath: path,
		success(res) {
			that.painterShow = false;
			that.show=false;
			uni.showToast({
				title: '已保存到相册',
				icon: 'success',
				duration: 2000
			})
		}
	})
	// #endif
},