批量上传图片添加水印

最新推荐文章于 2025-03-31 22:00:00 发布

lucky*girl

最新推荐文章于 2025-03-31 22:00:00 发布

阅读量346

点赞数

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/weixin_44409569/article/details/132763574

版权

思路：

1、循环图片列表，批量添加水印。

2、与之对应的html页面也要魂环并添加水印。

代码实现：

<view style="width: 0;height: 0;overflow: hidden;position:fixed;left: 200%;">
		 	<canvas v-for="(item,index) in canvesList" :key="index" :canvas-id="'firstCanvas' + index" class="canvas"
		 		style="background-color: #FFFFFF;width:660rpx;height:780rpx;"></canvas>
		 </view>

addWatermark(imageUrls) {
				 let vm = this;
			     imageUrls.forEach((imageUrl, index) => {
			     const ctx = uni.createCanvasContext('firstCanvas' + index, this);
				 let times = '拍摄时间：' + formatDate('YY-MM-DD hh:mm:ss')
				 const InfoSync = uni.getSystemInfoSync()
				 let bili = (InfoSync.windowWidth / 375) * 1
					ctx.fillStyle = "#FFFFFF"
					ctx.fillRect(0, 0, 330 * bili, 520 * bili)
			        ctx.drawImage(imageUrl,25 * bili, 10 * bili, 280 * bili, 320 *
							bili); // 绘制原始图片
			
			       ctx.setFillStyle("#333333")
			       ctx.setFontSize(14 * bili)
			       ctx.setTextAlign("bottom");
			       ctx.fillText(times, 25 * bili, 350 * bili)
			        ctx.draw(false, function(){
			          // 将canvas保存为图片文件
			          uni.canvasToTempFilePath({
			            canvasId: 'firstCanvas' + index,
			            success: (ress) => {
			              const tempFilePath = ress.tempFilePath;
			              vm.uploadImage(tempFilePath);
			            },
			          });
			        });
			      });
			    },