按比例加水印

src/features/Image/Image.vue

@@ -56,6 +56,26 @@
           </div>
         </td>
       </tr>
+      <tr>
+        <th>水印起始位置（横向）：</th>
+        <td>
+          <a-input
+            v-model:value="x"
+            style="width: 600px"
+            placeholder="数字，默认0.03"
+          />
+        </td>
+      </tr>
+      <tr>
+        <th>水印起始位置（纵向）：</th>
+        <td>
+          <a-input
+            v-model:value="y"
+            style="width: 600px"
+            placeholder="数字，默认0.01"
+          />
+        </td>
+      </tr>
       <tr id="watermark-select" v-if="type === '1'">
         <th>添加分数水印：</th>
         <td>
@@ -132,6 +152,8 @@ let watermark = ref(true);
 let trackMode = ref("");
 let examNumber = ref("");
 let subjectCode = ref("");
+let x = ref(0.03);
+let y = ref(0.01);
 
 const config = store.pageInputs["/image-download"];
 if (config) {
@@ -144,6 +166,8 @@ if (config) {
   trackMode.value = config.trackMode;
   examNumber.value = config.examNumber || "";
   subjectCode.value = config.subjectCode || "";
+  x.value = config.x || 30;
+  y.value = config.y || 10;
 }
 
 let ruleExample = computed(() => {
@@ -179,6 +203,14 @@ const start = (e: MouseEvent) => {
     alert("请选择图片转存目录");
     return false;
   }
+  if (!x.value) {
+    alert("水印起始位置（横向）");
+    return false;
+  }
+  if (!y.value) {
+    alert("水印起始位置（纵向）");
+    return false;
+  }
   if (!template.value.trim()) {
     alert("请填写图片转存规则");
     return false;
@@ -198,6 +230,8 @@ const start = (e: MouseEvent) => {
     trackMode: trackMode.value,
     examNumber: examNumber.value.trim(),
     subjectCode: subjectCode.value.trim(),
+    x: x.value - 0,
+    y: y.value - 0,
   };
   router.push("/image-download");
 };

src/features/ImageDownload/ImageDownload.vue

@@ -148,7 +148,9 @@ onMounted(async () => {
                 filePath,
                 student,
                 index + 1,
-                config.trackMode
+                config.trackMode,
+                config.x,
+                config.y
               );
             } catch (error) {
               errorCount.value += 1;

src/lib/watermark.ts

@@ -15,7 +15,9 @@ export async function addWatermark(
   file: string,
   student: Student,
   index: number,
-  trackMode: string
+  trackMode: string,
+  x = 0.03,
+  y = 0.01
 ): Promise<boolean> {
   // console.log(
   //   "enter addWatermark2",
@@ -23,6 +25,8 @@ export async function addWatermark(
   //   store.config.watermark.color,
   //   student.objectiveScore
   // );
+  x = imageWidth * x;
+  y = imageHeight * y;
   if (!gm) {
     gm =
       store.config.imagemagick != undefined
@@ -45,8 +49,8 @@ export async function addWatermark(
   //添加第一页的得分明细
   if (index == 1) {
     //初始坐标
-    let x = 30;
-    let y = 10;
+    // let x = 30;
+    // let y = 10;
     //最大宽/高限制
     const fontSize = store.config.watermark.fontSize || 30;
     const maxX = imageWidth / 2 - x * 2;

src/types/index.ts

@@ -41,6 +41,8 @@ export interface Store {
       trackMode: string;
       examNumber?: string;
       subjectCode?: string;
+      x?: number;
+      y?: number;
     };
   };
 }