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 );
    }
});
相关推荐
Json____1 小时前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位
web_Hsir9 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir9 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa11 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘13 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界1 天前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨1 天前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆1 天前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na011 天前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++