uniapp 通过标签生成海报

1.下载插件

 添加 海报画板 - DCloud 插件市场 到你的uniapp项目

2.设置模版

按照需求画出需要的海报

        <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.生成海报

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