From 346804c2fe1e3189b89947c17685ff9ab1e4922c Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期二, 28 四月 2026 11:55:22 +0800
Subject: [PATCH] 新增自适应水印功能及访问照片展示功能
---
src/components/AlbumImageUpload/index.vue | 36 ++++++++++++++++++++++++++++--------
1 files changed, 28 insertions(+), 8 deletions(-)
diff --git a/src/components/AlbumImageUpload/index.vue b/src/components/AlbumImageUpload/index.vue
index e30231f..6a4799b 100644
--- a/src/components/AlbumImageUpload/index.vue
+++ b/src/components/AlbumImageUpload/index.vue
@@ -131,6 +131,30 @@
return null;
};
+const getAdaptiveWatermarkStyle = (width, height) => {
+ const w = Math.max(1, Number(width) || 1);
+ const h = Math.max(1, Number(height) || 1);
+ const shortSide = Math.min(w, h);
+ const longSide = Math.max(w, h);
+ // 鍒嗘閫傞厤锛氬皬鍥惧噺灏忓瓧鍙凤紝澶у浘淇濇寔褰撳墠瑙嗚鏁堟灉
+ const isSmallImage = shortSide <= 720;
+ const fontSize = isSmallImage
+ ? Math.max(
+ 10,
+ Math.min(28, Math.floor(shortSide * 0.016 + longSide * 0.004))
+ )
+ : Math.max(
+ 14,
+ Math.min(56, Math.floor(shortSide * 0.022 + longSide * 0.006))
+ );
+ return {
+ fontSize,
+ padding: Math.max(isSmallImage ? 4 : 5, Math.floor(fontSize * 0.4)),
+ lineGap: Math.max(isSmallImage ? 1 : 2, Math.floor(fontSize * 0.16)),
+ edgeGap: 0,
+ };
+};
+
const addWatermarkByBrowserCanvas = (tempFilePath, text) => {
return new Promise((resolve, reject) => {
try {
@@ -151,10 +175,8 @@
ctx.drawImage(img, 0, 0, w, h);
const lines = wmText.split(/\r?\n/).filter(Boolean);
- const fontSize = Math.max(8, Math.floor(Math.min(w, h) * 0.014));
- const padding = Math.max(3, Math.floor(fontSize * 0.35));
- const lineGap = Math.max(1, Math.floor(fontSize * 0.1));
- const edgeGap = 0;
+ const { fontSize, padding, lineGap, edgeGap } =
+ getAdaptiveWatermarkStyle(w, h);
ctx.font = `${fontSize}px sans-serif`;
const maxChars = Math.max(...lines.map(t => (t || "").length), 0);
@@ -224,10 +246,8 @@
ctx.drawImage(tempFilePath, 0, 0, w, h);
const lines = wmText.split(/\r?\n/).filter(Boolean);
- const fontSize = Math.max(8, Math.floor(Math.min(w, h) * 0.014));
- const padding = Math.max(3, Math.floor(fontSize * 0.35));
- const lineGap = Math.max(1, Math.floor(fontSize * 0.1));
- const edgeGap = 0;
+ const { fontSize, padding, lineGap, edgeGap } =
+ getAdaptiveWatermarkStyle(w, h);
ctx.setFontSize(fontSize);
ctx.setFillStyle("rgba(0,0,0,0.2)");
--
Gitblit v1.9.3