IT评测·应用市场-qidao123.com技术社区

标题: uniapp 通过标签天生海报 [打印本页]

---

作者: 写过一篇    时间: 2024-9-28 10:20
标题: uniapp 通过标签天生海报
1.下载插件

 添加 海报画板 - DCloud 插件市场 到你的uniapp项目
2.设置模版

按照需求画出需要的海报

1.         <view class="poster">
2.                         <l-painter ref='painter' isCanvasToTempFilePath :css="`width: 600rpx;height:${height*1.6}rpx;`">
3.                                 <l-painter-view
4.                                         :css="`box-sizing: border-box; background: #fff; width: 600rpx;background-color:#999;height:${height*1.6}rpx;`">
5.                                         <l-painter-image :src="tempImg"
6.                                                 :css="`object-fit: cover; object-position: 50% 50%;width: 600rpx; height:${height*1.6}rpx; border-radius: 12rpx;`" />
7.                                         <l-painter-image src="/static/picture/logo.png"
8.                                                 css="position:absolute;width:600rpx;height:208rpx;top:0;left:0;" />
9.                                         <l-painter-image src="/static/picture/z1.png"
10.                                                 css="position:absolute;width:320rpx;height:184rpx;top:224rpx;left:-60rpx;" />
11.                                         <l-painter-image src="/static/picture/z2.png"
12.                                                 css="position:absolute;width:240rpx;height:264rpx;top:368rpx;right:0;" />
13.                                         <l-painter-image src="/static/picture/z3.png"
14.                                                 css="position:absolute;width:192rpx;height:224rpx;top:504rpx;" />
15.                                         <l-painter-image src="/static/picture/z4.png"
16.                                                 css="position:absolute;width:160rpx;height:160rpx;top:720rpx;right:0;" />
17.                                 </l-painter-view>
18.                         </l-painter>
19.                 </view>

复制代码

3.天生海报

1. this.$refs.painter.canvasToTempFilePathSync({
2.         fileType: "jpg",
3.         pathType: 'url',
4.         quality: 1,
5.         success: (res) => {
6.        // 拿到路径，进行其他处理
7.        console.log( res.tempFilePath );
8.     }
9. });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4