调整UI

ptsfdtz · Sep 3, 2024 · 605b515 · 605b515
1 parent 4234fb4
commit 605b515
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 70 deletions.
diff --git a/index.html b/index.html
@@ -1,58 +1,53 @@
 <!DOCTYPE html>
-<html lang="zh">
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>照片添加时间戳水印</title>
-    <style>
-      #output {
-        display: block;
-        margin-top: 20px;
-        max-width: 100%;
-        height: auto;
-      }
-      #download {
-        display: none;
-        margin-top: 20px;
-      }
-    </style>
-    <!-- 加载 Google Fonts 字体 Nerko One -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Handjet:[email protected]&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Handjet:[email protected]&family=Permanent+Marker&display=swap"
+      rel="stylesheet"
+    />
+    <title>照片水印工具</title>
+    <link rel="stylesheet" href="./src/style.css" />
   </head>
   <body>
-    <h1>照片添加时间戳水印</h1>
-    <input type="file" id="upload" accept="image/*" />
-    <label for="fontSelect">选择字体:</label>
-    <select id="fontSelect">
-      <option value="Arial">Arial</option>
-      <option value="Courier New">Courier New</option>
-      <option value="Georgia">Georgia</option>
-      <option value="Times New Roman">Times New Roman</option>
-      <option value="Verdana">Verdana</option>
-      <option value="'Nerko One', cursive">Nerko One</option>
-    </select>
-    <br />
-    <label>选择水印位置:</label>
-    <label>
-      <input type="radio" name="position" value="bottom-right" checked /> 右下
-    </label>
-    <label>
-      <input type="radio" name="position" value="bottom-left" /> 左下
-    </label>
-    <label>
-      <input type="radio" name="position" value="top-right" /> 右上
-    </label>
-    <label>
-      <input type="radio" name="position" value="top-left" /> 左上
-    </label>
-    <canvas id="canvas" style="display: none"></canvas>
-    <img id="output" alt="添加水印后的图片" />
-    <button id="download">下载图片</button>
+    <div class="photo-container">
+      <canvas id="canvas"></canvas>
+      <img id="output" style="display: none" />
+    </div>
+
+    <div class="controls">
+      <input type="file" id="upload" accept="image/*" />
+      <label for="fontSelect">选择字体:</label>
+      <select id="fontSelect">
+        <option value="Arial">Arial</option>
+        <option value="Verdana">Verdana</option>
+        <option value="Times New Roman">Times New Roman</option>
+        <option value="Nerko One">Nerko One</option>
+        <option value="Handjet">handjet</option>
+        <option value="Permanent Marker">Permanent Marker</option>
+      </select>
+      <label for="positionSelect">选择水印位置:</label>
+      <select id="positionSelect">
+        <option value="bottom-right">右下角</option>
+        <option value="bottom-left">左下角</option>
+        <option value="top-right">右上角</option>
+        <option value="top-left">左上角</option>
+      </select>
+      <button id="download" style="display: none">下载图片</button>
+    </div>
+
     <script src="./src/script.js"></script>
   </body>
 </html>
diff --git a/src/script.js b/src/script.js
@@ -1,23 +1,22 @@
 const upload = document.getElementById("upload");
-const previewCanvas = document.getElementById("canvas"); // 用于预览的 Canvas
+const previewCanvas = document.getElementById("canvas");
 const previewCtx = previewCanvas.getContext("2d");
 const output = document.getElementById("output");
 const downloadButton = document.getElementById("download");
 const fontSelect = document.getElementById("fontSelect");
-const positionRadios = document.getElementsByName("position");
+const positionSelect = document.getElementById("positionSelect");
 
-// 新增用于下载的隐藏 Canvas
 const downloadCanvas = document.createElement("canvas");
 const downloadCtx = downloadCanvas.getContext("2d");
 
-let currentImageSrc = null; // 保存当前图片的 src
-let imageTimestamp = null; // 保存图片文件的时间戳
+let currentImageSrc = null;
+let imageTimestamp = null;
 
 function processImage(file) {
-  imageTimestamp = new Date(file.lastModified); // 获取文件的时间戳
+  imageTimestamp = new Date(file.lastModified);
   const reader = new FileReader();
   reader.onload = (e) => {
-    currentImageSrc = e.target.result; // 保存当前图片 src
+    currentImageSrc = e.target.result;
     drawImageWithWatermark(currentImageSrc, imageTimestamp);
   };
   reader.readAsDataURL(file);
@@ -26,17 +25,25 @@ function processImage(file) {
 function drawImageWithWatermark(src, timestamp) {
   const img = new Image();
   img.onload = () => {
-    // 设置下载 Canvas 与原始图片相同尺寸
+    const maxWidth = window.innerWidth * 0.7; // 最大宽度为视口宽度的 70%
+    const maxHeight = window.innerHeight * 0.7; // 最大高度为视口高度的 70%
+
+    let width = img.width;
+    let height = img.height;
+    const widthRatio = maxWidth / width;
+    const heightRatio = maxHeight / height;
+    const ratio = Math.min(widthRatio, heightRatio);
+
+    width *= ratio;
+    height *= ratio;
+
     setupCanvas(downloadCanvas, downloadCtx, img.width, img.height);
     downloadCtx.drawImage(img, 0, 0, img.width, img.height);
     addWatermark(downloadCtx, img.width, img.height, timestamp);
 
-    // 设置预览 Canvas，尺寸缩小，降低画质
-    const previewWidth = img.width * 0.5; // 将预览图的分辨率设为原图的 50%
-    const previewHeight = img.height * 0.5;
-    setupCanvas(previewCanvas, previewCtx, previewWidth, previewHeight);
-    previewCtx.drawImage(img, 0, 0, previewWidth, previewHeight);
-    addWatermark(previewCtx, previewWidth, previewHeight, timestamp);
+    setupCanvas(previewCanvas, previewCtx, width, height);
+    previewCtx.drawImage(img, 0, 0, width, height);
+    addWatermark(previewCtx, width, height, timestamp);
 
     updateOutput();
   };
@@ -46,18 +53,16 @@ function drawImageWithWatermark(src, timestamp) {
 function setupCanvas(canvas, ctx, width, height) {
   canvas.width = width;
   canvas.height = height;
-  ctx.clearRect(0, 0, width, height); // 清除之前的内容
+  ctx.clearRect(0, 0, width, height);
 }
 
 function addWatermark(ctx, width, height, timestamp) {
-  const fontSize = Math.max(Math.min(width, height) * 0.03, 16); // 设置字体大小 3% 至 10px
-  const selectedFont = fontSelect.value; // 获取用户选择的字体
+  const fontSize = Math.max(Math.min(width, height) * 0.05, 16);
+  const selectedFont = fontSelect.value;
   ctx.font = `${fontSize}px ${selectedFont}`;
   ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
 
-  const selectedPosition = [...positionRadios].find(
-    (radio) => radio.checked
-  ).value;
+  const selectedPosition = positionSelect.value;
 
   let x, y;
 
@@ -115,10 +120,8 @@ fontSelect.addEventListener("change", () => {
   }
 });
 
-positionRadios.forEach((radio) =>
-  radio.addEventListener("change", () => {
-    if (currentImageSrc) {
-      drawImageWithWatermark(currentImageSrc, imageTimestamp);
-    }
-  })
-);
+positionSelect.addEventListener("change", () => {
+  if (currentImageSrc) {
+    drawImageWithWatermark(currentImageSrc, imageTimestamp);
+  }
+});
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,39 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+.photo-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+#canvas {
+    border: 1px solid #ccc;
+    max-width: 70vw; /* 最大宽度为视口宽度的 70% */
+    max-height: 70vh; /* 最大高度为视口高度的 70% */
+    width: auto;
+    height: auto; 
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 15px;
+}
+
+.controls label,
+.controls select,
+.controls button,
+.controls input {
+    margin: 5px;
+}