uniapp图片加水印

uniapp图片加水印 废话没有，直接上代码看效果

<template>
	<view class="content">
		<canvas style="border: 1px solid green;position: absolute;left: -5000px;" :style="{'width':w,'height': h}" canvas-id="firstCanvas" ref="mycanvas"></canvas>
		<button @click="getimg">获取图片</button>
		<image v-for="item in imgarr" :key="item" style="width: 200px;" mode="widthFix" :src="item"></image>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				w:0,
				h:0,
				imgarr:[]
			}
		},
		onLoad() {

		},
		methods: {
			//获取图片
			getimg(){
				let that = this;
				uni.chooseImage({
					count:6,  //从相册中都可选择的图片个数
					sizeType:['original','compressed'], //选择图片的大小
					sourceType:['album','camera'], //选择图片的来源					
					success:res=>{
						console.log(res);
						//图片数组
						let tempFilePath = res.tempFilePaths; 
						let num = 0;
						let inter = setInterval(()=>{
							
							that.setimg(tempFilePath[num]);
							num++;
							if(num==tempFilePath.length){
								num= 0 ;
								clearInterval(inter);
							}
						},500)
						
					
						
					}
				})
			},
			//获取图片信息
			setimg(e){
				let date = "--水印字--";   
				let that = this;
				let ctx = uni.createCanvasContext('firstCanvas',this);
				uni.getImageInfo({
					src:e,
					success: (res) => {
						console.log(res);
						that.w = res.width/2+'px';
						that.h = res.height/2+'px';
						//初始化画布
						
						ctx.fillRect(0, 0, that.w, that.h);
						
						// //将图片src放到cancas内，宽高为图片大小
						ctx.drawImage(res.path,0,0,res.width/2,res.height/2);
						
						ctx.rotate(45 * Math.PI / 180); 
									
						//对斜对角线以左部分进行文字的填充
						for (let j = 1; j < 10; j++) { //用for循环达到重复输出文字的效果，这个for循环代表纵向循环
							ctx.beginPath();
							ctx.setFontSize(20);
							ctx.setFillStyle("rgba(169,169,169,.6)");
							
							ctx.fillText(date, 0, 50 * j);
							for (let i = 1; i < 10; i++) { //这个for循环代表横向循环，
								ctx.beginPath();
								ctx.setFontSize(20);
								ctx.setFillStyle("rgba(169,169,169,.6)");
								ctx.fillText(date, 80 * i, 50 * j);
								
							}
						} //两个for循环的配合，使得文字充满斜对角线的左下部分
									
						// 对斜对角线以右部分进行文字的填充逻辑同上
						for (let j = 0; j < 10; j++) {
							ctx.beginPath();
							ctx.setFontSize(20);
							ctx.setFillStyle("rgba(169,169,169,.6)");
									
							ctx.fillText(date, 0, -50 * j);
							for (let i = 1; i < 10; i++) {
								ctx.beginPath();
								ctx.setFontSize(20);
								ctx.setFillStyle("rgba(169,169,169,.6)");
								ctx.fillText(date, 80 * i, -50 * j);
							
							}
						}
						ctx.rotate(-45 * Math.PI / 180);
						ctx.draw(false, () => {
							uni.canvasToTempFilePath({	//将画布中内容转成图片，即水印与图片合成
							  canvasId: 'firstCanvas',
							  success: (res) => {
								  console.log(res);
								  that.imgarr.push(res.tempFilePath);
								 	
							  }
							})
						})
						
						
						
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>