<!--
 * @Author: XHC
 * @Date: 2025-06-06 15:36:04
 * @LastEditors: XHC
 * @LastEditTime: 2025-06-06 16:38:39
 * @Description: 
-->
<template>
	<canvas v-show="waterMarkParams.display" canvas-id="waterMarkCanvas" :style="canvasStyle" />
</template>
<script setup>
import { reactive, ref, computed, nextTick, defineExpose } from 'vue';

				let waterMarkParams = reactive({ 
					display: false, // 控制 canvas 创建与销毁
					canvasWidth: 300, // 默认宽度
					canvasHeight: 225, // 默认高度
					contentHeight: 170, // 将要被绘制到图像中的矩形的高度(px)
				})
				let username= ref("YourUsername") // 假设的用户名
			// 画布
const canvasStyle = computed(() => {
	return {
		position: "fixed", // 移除到屏幕外
		left: "9999px",
		width: waterMarkParams.canvasWidth + "px",
		height: waterMarkParams.canvasHeight + "px",
	}
				
}) 
			// 因为有可能在相册中选择多个图片，所以这里要依次生成水印
			async function callAddWaterMark(imgPathArr) {
				let results = [];
				if (imgPathArr.length > 0) {
					let addIndex = 0;
					while (addIndex < imgPathArr.length) {
						const tempFilePath = await addWaterMark(imgPathArr[addIndex]);
						results.push(tempFilePath);
						addIndex = addIndex + 1;
					}
				}
				return results;
			}
			// 添加水印
function addWaterMark(src) {
	return new Promise((resolve, reject) => {
		// 获取图片信息，配置 canvas 尺寸
		uni.getImageInfo({
			src,
			success: (res) => {
				// 修复部分手机(如红米9)手机屏幕比较窄拍摄出来的图片水印压缩着覆盖的问题
				waterMarkParams.canvasWidth = Math.max(res.width, 886);
				waterMarkParams.canvasHeight = res.height;
				waterMarkParams.display = true;
				console.log("当前图片信息waterMarkParams：", waterMarkParams);
				// 等待 canvas 元素创建
				nextTick(() => {
					let context = uni.createCanvasContext("waterMarkCanvas", this);
					/* 绘制 */
					const {
						canvasWidth,
						canvasHeight,
						contentHeight
					} =
						waterMarkParams;
					// 绘制前清空画布
					context.clearRect(0, 0, canvasWidth, canvasHeight);
					// 将图片src放到cancas内，宽高必须为图片大小
					context.drawImage(
						src,
						0,
						0,
						canvasWidth,
						canvasHeight,
						canvasWidth,
						canvasHeight
					);
					// 设置边框的透明度
					context.setGlobalAlpha(0.3);
					context.beginPath();
					// 绘制底部的白色背景
					context.rect(
						0,
						canvasHeight - contentHeight,
						canvasWidth,
						contentHeight
					);
					// context.setFillStyle("white"); // 白色背景
					context.fill();
					// 设置文字的透明度
					context.setGlobalAlpha(1);
					// 3.绘制底部的文字
					context.setFontSize(32);
					context.setTextAlign("left");
					context.setFillStyle("white"); // 显示字为白色
					context.fillText(`拍摄人：${username.value}`, 50, canvasHeight -
						120);
					context.fillText(
						`拍摄时间：${new Date()
						}`,
						50,
						canvasHeight - 70
					);
					// 一定要加上一个定时器否则进入到页面第一次可能会无法正常拍照，后几次才正常
					setTimeout(() => {
						// 本次绘画完重开开始绘画，并且在绘画完毕之后再保存图片，不然页面可能会出现白屏等情况
						context.draw(false, () => {
							console.log("!!!!!开始绘画", canvasWidth,
								canvasHeight);
							uni.canvasToTempFilePath({
								canvasId: "waterMarkCanvas",
								fileType: "jpg",
								width: canvasWidth,
								height: canvasHeight,
								destWidth: canvasWidth,
								destHeight: canvasHeight,
								success: ({
									tempFilePath
								}) => {
									console.log("绘制成功",
										tempFilePath
									);
									waterMarkParams
										.display =
										false;
									resolve(
										tempFilePath
									);
								},
								fail: (err) => {
									reject(err);
									console.log(err);
								},
							},
								this
							);
						});
					}, 1000);
				});
			},
		});
	});
}

// 暴露方法给父组件调用
defineExpose({ callAddWaterMark })
</script>