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 );
    }
});
相关推荐
CHB15 小时前
uni-ai:让你的App快速接入AI
uni-app·deepseek
小徐_23333 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮3 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw53 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !3 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode