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 );
    }
});
相关推荐
qq_424409192 分钟前
uniapp的app项目,添加全局弹窗
uni-app
七夜zippoe3 小时前
uniapp跳转页面时如何带对象参数
uni-app·携带参数
racerun3 小时前
UniApp中的pages.json 和 tabBar
uni-app·json
米粒宝的爸爸1 天前
uniapp在app端,在导航栏设置自定义按钮
uni-app
dssxyz1 天前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
xw51 天前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 天前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
颜渊呐1 天前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长1 天前
多状态映射不同样式(scss语法)
vue.js·uni-app
一念杂记1 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app