海报画板插件＜l-painter＞的使用

插件地址

插件市场-海报画板

我的demo

<l-painter ref="painter"
			css="width: 750rpx; padding: 30rpx; background: linear-gradient(,#2b75fa 100%, #f5f5f5 0%);box-sizing:border-box;">
			<!-- //如果使用Template出现顺序错乱，可使用`template` 等所有变量完成再显示 -->
			<!-- 这里是加了水印 用户昵称和id -->			
            <l-painter-view
				css="background-color:#fff;width:100%;border-radius:30rpx;padding:30rpx;box-sizing:border-box;position:relative;overflow:hidden;">
				<l-painter-view css="position:absolute;left:10rpx;top:50%;transform:translateY(-50%) rotate(45deg) 0 0;text-align:center;">
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					
				</l-painter-view>
				<l-painter-view css="position:absolute;left:10rpx;top:10rpx;transform:rotate(45deg) 0 0;text-align:center;">
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					
				</l-painter-view>
				<l-painter-view css="position:absolute;left:10rpx;bottom:10rpx;transform:rotate(45deg) 0 0;text-align:center;">
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					<l-painter-text :text="nickname+ ' ' + ' user_id:' +user_id" css="font-size:32rpx;color:#eee;margin: 0 10rpx;"></l-painter-text>
					
				</l-painter-view>
				<l-painter-view
					css="display:flex;align-items:center;justify-content:space-between;margin-bottom:20rpx;">
					<l-painter-image src="/static/icon/titlelogo.png"
						css="width:152rpx;height:80rpx;margin-right:20rpx;"></l-painter-image>
					<l-painter-text css="font-weight:bold;font-size:64rpx;color:#3D3D3D;" :text="detail.names" />
					<l-painter-view css="width:152rpx;height:80rpx;margin-left:20rpx;"></l-painter-view>
				</l-painter-view>
				
				<l-painter-view css="display:flex;justify-content:center;margin-bottom:20rpx;width:100%;">
					<l-painter-image :src="cover" css="width:240rpx;height:305rpx;object-fit:cover;"></l-painter-image>
				</l-painter-view>
				<l-painter-view>
					<l-painter-text css="font-size: 36rpx;font-weight: bold;line-height: 48rpx;" text="情况说明" />
				</l-painter-view>
				<l-painter-view>
					<l-painter-text css="line-height: 48rpx;line-clamp:4;" :text="detail.detail"></l-painter-text>
				</l-painter-view>
				<l-painter-qrcode text="二维码内容 例limeui.qcoon.cn"
					css="width: 184rpx; height: 184rpx;margin:auto;"></l-painter-qrcode>
				<l-painter-view css="text-align:center;color:#999;font-size:24rpx;">
					<l-painter-text text="扫描二维码下载APP"
						css="text-align:center;color:#999;font-size:28rpx;margin:20rpx 0;"></l-painter-text>
				</l-painter-view>

			</l-painter-view>
			<l-painter-image src="/static/index/steps.png"
				css="width:100%;object-fit:contain;margin:20rpx 0;"></l-painter-image>
			
			
		</l-painter>

		
		<view class="btn" @click="save" v-if="detail.detail">保存图片</view>

//保存图片
save() {
				
				let that = this
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);

						
						// 非H5 保存到相册
						// // H5 提示用户长按图另存
						 uni.saveImageToPhotosAlbum({
						     filePath: res.tempFilePath,
						     success:  ()=> {
						         console.log('save success');
						uni.showToast({
							title:'保存成功'
						})

						     }
						 });
					},
				});
			},

我的效果图

 

具体怎么使用请参考官方文档，第一次用，有错误的地方请指正！