uniapp 通过标签生成海报

1.下载插件

添加 海报画板 - DCloud 插件市场 到你的uniapp项目

2.设置模版

按照需求画出需要的海报

html 复制代码
        <view class="poster">
			<l-painter ref='painter' isCanvasToTempFilePath :css="`width: 600rpx;height:${height*1.6}rpx;`">
				<l-painter-view
					:css="`box-sizing: border-box; background: #fff; width: 600rpx;background-color:#999;height:${height*1.6}rpx;`">
					<l-painter-image :src="tempImg"
						:css="`object-fit: cover; object-position: 50% 50%;width: 600rpx; height:${height*1.6}rpx; border-radius: 12rpx;`" />
					<l-painter-image src="/static/picture/logo.png"
						css="position:absolute;width:600rpx;height:208rpx;top:0;left:0;" />
					<l-painter-image src="/static/picture/z1.png"
						css="position:absolute;width:320rpx;height:184rpx;top:224rpx;left:-60rpx;" />
					<l-painter-image src="/static/picture/z2.png"
						css="position:absolute;width:240rpx;height:264rpx;top:368rpx;right:0;" />
					<l-painter-image src="/static/picture/z3.png"
						css="position:absolute;width:192rpx;height:224rpx;top:504rpx;" />
					<l-painter-image src="/static/picture/z4.png"
						css="position:absolute;width:160rpx;height:160rpx;top:720rpx;right:0;" />
				</l-painter-view>
			</l-painter>
		</view>

3.生成海报

html 复制代码
this.$refs.painter.canvasToTempFilePathSync({
	fileType: "jpg",
	pathType: 'url',
	quality: 1,
	success: (res) => {
       // 拿到路径,进行其他处理
       console.log( res.tempFilePath );
    }
});
相关推荐
浩星11 小时前
uniapp运行鸿蒙报错整理
uni-app
游戏开发爱好者812 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9159184120 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
初出茅庐的1 天前
uniapp - AI 聊天中的md组件
前端·vue.js·uni-app
于慨1 天前
uniapp用webview导入本地网页,ios端打开页面空白问题
uni-app
于慨1 天前
uniapp云托管前端网页
前端·uni-app
y东施效颦1 天前
uni-app 配置华为离线推送流程
前端·vue.js·uni-app
paopaokaka_luck1 天前
基于SpringBoot+Uniapp球场预约小程序(腾讯地图API、Echarts图形化分析、二维码识别)
spring boot·小程序·uni-app
于慨1 天前
uniapp各端通过webview实现互相通信
uni-app
初出茅庐的2 天前
uniapp - AI 聊天页面布局的实现
前端·vue.js·uni-app