初始化

utils/watermark.js

@@ -0,0 +1,97 @@
+// 新添加的水印功能----知无涯
+/**
+ * 为图片添加水印
+ * @param {File} file - 原始图片文件
+ * @param {string} text - 水印文字
+ * @param {object} options - 水印配置选项
+ * @returns {Promise<File>} - 返回带水印的新图片文件
+ */
+export const addWatermarkToImage = (file, text, options = {}) => {
+    return new Promise((resolve, reject) => {
+        if (!file || !(file instanceof Blob)) {
+            reject(new Error('参数必须是Blob或File对象'));
+            return;
+        }
+        if (!text) {
+            reject(new Error('水印文字不能为空'));
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const img = new Image();
+            img.onload = () => {
+                try {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = img.width;
+                    canvas.height = img.height;
+                    const ctx = canvas.getContext('2d');
+
+                    // 绘制原始图片
+                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+                    // 设置水印样式 - 增强可见性
+                    // ctx.font = options.font || 'bold 20px Arial'; // 加大字号并加粗
+                    // ctx.fillStyle = options.color || 'rgba(0, 0, 0, 0.7)'; // 改为黑色，提高不透明度
+                    // ctx.textAlign = 'center';
+                    // ctx.textBaseline = 'middle';
+					// 计算字体大小
+					const fontSize = Math.min(canvas.width, canvas.height) / 20; // 根据图片大小动态调整字体大小
+					ctx.font = `bold ${fontSize}px Arial`; // 加大字号并加粗
+					ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; // 改为黑色，提高不透明度
+					ctx.textAlign = 'right';
+					ctx.textBaseline = 'bottom';
+
+                    // 添加文字阴影增强可读性
+                    ctx.shadowColor = 'rgba(255, 255, 255, 0.8)';
+                    ctx.shadowBlur = 5;
+                    ctx.shadowOffsetX = 1;
+                    ctx.shadowOffsetY = 1;
+
+                    // 添加水印文字
+                    //ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+					
+					// 拆分文本为多行
+					const lines = text.split('\n');
+					//const lineHeight = fontSize * 1.5; // 每行的高度，可以根据字体大小调整
+					//const startY = (canvas.height / 2) - ((lines.length - 1) * lineHeight / 2);
+					const lineHeight = fontSize * 1.5; // 每行的高度，可以根据字体大小调整
+					const startX = canvas.width - 10; // 右下角的x坐标，留10像素的边距
+					let startY = canvas.height - 10; // 右下角的y坐标，留10像素的边距
+					
+					// 添加水印文字
+					// lines.forEach((line, index) => {
+					//     ctx.fillText(line, canvas.width / 2, startY + index * lineHeight);
+					// });
+					lines.forEach((line) => {
+					    const textWidth = ctx.measureText(line).width;
+					    ctx.fillText(line, startX, startY);
+					    startY -= lineHeight; // 每行向上移动一行的高度
+					});
+
+                    // 清除阴影设置
+                    ctx.shadowColor = 'transparent';
+
+                    // 转换为Blob
+                    canvas.toBlob((blob) => {
+                        if (!blob) {
+                            reject(new Error('图片转换失败'));
+                            return;
+                        }
+                        const newFile = new File([blob], file.name || 'watermarked_image', {
+                            type: file.type || 'image/jpeg',
+                            lastModified: Date.now()
+                        });
+                        resolve(newFile);
+                    }, file.type || 'image/jpeg');
+                } catch (error) {
+                    reject(error);
+                }
+            };
+            img.onerror = () => reject(new Error('图片加载失败'));
+            img.src = e.target.result;
+        };
+        reader.onerror = () => reject(new Error('文件读取失败'));
+        reader.readAsDataURL(file);
+    });
+};