新增自适应水印功能及访问照片展示功能

yyb

2026-04-28 346804c2fe1e3189b89947c17685ff9ab1e4922c

 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)");