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 );
    }
});
相关推荐
小旋风012341 小时前
uniapp自定义头部(兼容微信小程序(胶囊和状态栏),兼容h5)
微信小程序·uni-app·notepad++
耶啵奶膘2 小时前
uniapp+vue3表格样式
uni-app
浮桥4 小时前
uniapp -- 实现微信小程序、app、H5端视频上传
微信小程序·uni-app·音视频
山河故人16311 小时前
基于 SSE 和分块传输的 Uniapp 微信小程序 实现 流式传输 对话
微信小程序·小程序·uni-app
不老刘13 小时前
Uni-app网络请求AES加密解密实现
网络·uni-app
洪洪呀13 小时前
uni-app vue3 实现72小时倒计时功能
vue.js·uni-app
王哈哈的学习笔记1 天前
uniapp小程序使用echarts
前端·小程序·uni-app
yrldjsbk1 天前
uniapp小程序开发入门01-快速搭建一个空白的项目并预览它
uni-app
JavaDog程序狗1 天前
【实操】uniapp纯前端搞个识别植物花草小程序
前端·vue.js·uni-app
七七小报1 天前
uniapp-商城-42-shop 后台管理 分包
前端·uni-app