From ba094407281a5cda8e3292db22e502130e03dee2 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Thu, 26 Mar 2026 10:00:23 +0800
Subject: [PATCH] bug

---
 odf-uniapp/pages/fault-add/index.vue |  37 ++++-
 odf-uniapp/utils/watermark.js        | 200 +++++++++++++++++----------
 2 files changed, 163 insertions(+), 74 deletions(-)

diff --git a/odf-uniapp/pages/fault-add/index.vue b/odf-uniapp/pages/fault-add/index.vue
index 0af2eac..74b98b8 100644
--- a/odf-uniapp/pages/fault-add/index.vue
+++ b/odf-uniapp/pages/fault-add/index.vue
@@ -108,11 +108,26 @@
         <text class="submit-btn-text">{{ submitting ? '提交中...' : '提交故障' }}</text>
       </view>
     </view>
+
+    <!-- 离屏 canvas 用于水印绘制（APP端需要在屏幕内才能渲染） -->
+    <canvas
+      canvas-id="watermarkCanvas"
+      :style="{
+        position: 'fixed',
+        left: '0px',
+        top: '0px',
+        width: canvasW + 'px',
+        height: canvasH + 'px',
+        opacity: 0,
+        pointerEvents: 'none',
+        zIndex: -1
+      }"
+    />
   </view>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, getCurrentInstance, nextTick } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { addFault } from '@/services/trunk'
 import { addWatermark } from '@/utils/watermark'
@@ -121,6 +136,9 @@ const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
 const photoList = ref([])
 const cableId = ref('')
 const submitting = ref(false)
+const canvasW = ref(100)
+const canvasH = ref(100)
+const instance = getCurrentInstance()
 
 const form = reactive({
   faultTime: '',
@@ -288,14 +306,25 @@ async function handleSubmit() {
 
   try {
     // 水印处理
-    const watermarkText = `${form.faultTime} ${form.personnel}`
+    const watermarkLines = [
+      `${form.faultTime}  ${form.personnel}`,
+      `经度:${form.longitude}  纬度:${form.latitude}`
+    ]
     const watermarkedPhotos = []
     for (const photo of photoList.value) {
       try {
-        const result = await addWatermark(photo, watermarkText)
+        const result = await addWatermark(photo, watermarkLines, {
+          canvasId: 'watermarkCanvas',
+          proxy: instance.proxy,
+          setSize(w, h) {
+            canvasW.value = w
+            canvasH.value = h
+          }
+        })
         watermarkedPhotos.push(result)
+        // 每张图处理完后等一下，让 canvas 状态重置
+        await nextTick()
       } catch (err) {
-        // 水印失败则使用原图
         watermarkedPhotos.push(photo)
       }
     }
diff --git a/odf-uniapp/utils/watermark.js b/odf-uniapp/utils/watermark.js
index 0be68d7..258a8aa 100644
--- a/odf-uniapp/utils/watermark.js
+++ b/odf-uniapp/utils/watermark.js
@@ -1,81 +1,141 @@
 /**
- * 在照片左下角叠加水印文字
+ * 在照片左下角叠加多行水印文字
  * @param {string} imagePath - 原始图片路径
- * @param {string} text - 水印文字（如 "2025/06/15 12:00 张三"）
- * @returns {Promise<string>} 带水印的临时文件路径（H5 返回 base64 dataURL）
+ * @param {string|string[]} lines - 水印文字，字符串或字符串数组
+ * @param {object} [canvasCtx] - APP端传入 { canvasId, proxy, setSize }
+ * @returns {Promise<string>} 带水印的图片路径，失败时返回原图
  */
-export function addWatermark(imagePath, text) {
-  return new Promise((resolve, reject) => {
-    // #ifdef APP-PLUS
-    uni.getImageInfo({
-      src: imagePath,
-      success(imgInfo) {
-        const width = imgInfo.width
-        const height = imgInfo.height
-        const bitmap = new plus.nativeObj.Bitmap('watermark')
-        bitmap.load(imagePath, () => {
-          const canvas = new plus.nativeObj.View('watermarkView', {
-            left: '0px', top: '0px',
-            width: width + 'px', height: height + 'px'
-          })
-          canvas.drawBitmap(bitmap, {}, { left: '0px', top: '0px', width: width + 'px', height: height + 'px' })
-          const fontSize = Math.max(Math.floor(width * 0.03), 14)
-          const padding = Math.floor(fontSize * 0.8)
-          const textX = padding
-          const bgHeight = fontSize + padding * 2
-          canvas.drawRect(
-            { color: 'rgba(0,0,0,0.4)' },
-            { left: '0px', top: (height - bgHeight) + 'px', width: width + 'px', height: bgHeight + 'px' }
-          )
-          canvas.drawText(text, {
-            left: textX + 'px',
-            top: (height - bgHeight + padding) + 'px',
-            width: (width - textX * 2) + 'px',
-            height: fontSize + 'px'
-          }, { size: fontSize + 'px', color: '#ffffff' })
-          const tempPath = `_doc/watermark_${Date.now()}.jpg`
-          canvas.toBitmap(tempPath, {}, () => {
-            bitmap.clear()
-            resolve(tempPath)
-          }, (err) => {
-            bitmap.clear()
-            reject(err)
-          })
-        }, (err) => reject(err))
-      },
-      fail: reject
-    })
-    // #endif
+export function addWatermark(imagePath, lines, canvasCtx) {
+  if (typeof lines === 'string') {
+    lines = [lines]
+  }
 
-    // #ifdef H5
+  return new Promise((resolve) => {
+    // 超时保护：10秒
+    const timer = setTimeout(() => {
+      console.warn('[watermark] timeout')
+      resolve(imagePath)
+    }, 10000)
+
+    _doWatermark(imagePath, lines, canvasCtx)
+      .then((r) => { clearTimeout(timer); resolve(r || imagePath) })
+      .catch((e) => { clearTimeout(timer); console.warn('[watermark]', e); resolve(imagePath) })
+  })
+}
+
+function _doWatermark(imagePath, lines, canvasCtx) {
+  // #ifdef H5
+  return _h5(imagePath, lines)
+  // #endif
+  // #ifdef APP-PLUS
+  return _app(imagePath, lines, canvasCtx)
+  // #endif
+  // eslint-disable-next-line no-unreachable
+  return Promise.resolve(imagePath)
+}
+
+// ========== H5 ==========
+// #ifdef H5
+function _h5(imagePath, lines) {
+  return new Promise((resolve, reject) => {
     const img = new Image()
     img.crossOrigin = 'anonymous'
     img.onload = () => {
-      const width = img.naturalWidth
-      const height = img.naturalHeight
-      const canvas = document.createElement('canvas')
-      canvas.width = width
-      canvas.height = height
-      const ctx = canvas.getContext('2d')
-      ctx.drawImage(img, 0, 0, width, height)
-      const fontSize = Math.max(Math.floor(width * 0.03), 14)
-      const padding = Math.floor(fontSize * 0.8)
-      const bgHeight = fontSize + padding * 2
-      ctx.fillStyle = 'rgba(0,0,0,0.4)'
-      ctx.fillRect(0, height - bgHeight, width, bgHeight)
-      ctx.fillStyle = '#ffffff'
-      ctx.font = `${fontSize}px sans-serif`
-      ctx.textBaseline = 'middle'
-      ctx.fillText(text, padding, height - bgHeight / 2)
-      resolve(canvas.toDataURL('image/jpeg', 0.9))
+      try {
+        const w = img.naturalWidth, h = img.naturalHeight
+        const c = document.createElement('canvas')
+        c.width = w; c.height = h
+        const ctx = c.getContext('2d')
+        ctx.drawImage(img, 0, 0, w, h)
+        _stamp(ctx, w, h, lines, false)
+        resolve(c.toDataURL('image/jpeg', 0.9))
+      } catch (e) { reject(e) }
     }
-    img.onerror = (err) => reject(err || new Error('图片加载失败'))
+    img.onerror = reject
     img.src = imagePath
-    // #endif
-
-    // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
-    // 小程序端：跳过水印，直接返回原图
-    // resolve(imagePath)
-    // #endif
   })
 }
+// #endif
+
+// ========== APP ==========
+// #ifdef APP-PLUS
+function _app(imagePath, lines, cc) {
+  if (!cc || !cc.canvasId || !cc.proxy) {
+    return Promise.reject(new Error('missing canvasCtx'))
+  }
+  return new Promise((resolve, reject) => {
+    uni.getImageInfo({
+      src: imagePath,
+      success(info) {
+        try {
+          // 限制 canvas 宽度 ≤ 1200，避免内存问题
+          let dw = info.width, dh = info.height
+          if (dw > 1200) { const r = 1200 / dw; dw = 1200; dh = Math.round(info.height * r) }
+
+          // 更新页面 canvas 尺寸
+          if (typeof cc.setSize === 'function') cc.setSize(dw, dh)
+
+          // 等 DOM 刷新（200ms 足够 APP webview 更新）
+          setTimeout(() => {
+            try {
+              const ctx = uni.createCanvasContext(cc.canvasId, cc.proxy)
+              ctx.drawImage(imagePath, 0, 0, dw, dh)
+              _stamp(ctx, dw, dh, lines, true)
+
+              let done = false
+              const exp = () => {
+                if (done) return
+                done = true
+                uni.canvasToTempFilePath({
+                  canvasId: cc.canvasId,
+                  x: 0, y: 0, width: dw, height: dh,
+                  destWidth: info.width, destHeight: info.height,
+                  fileType: 'jpg', quality: 0.9,
+                  success: (r) => resolve(r.tempFilePath),
+                  fail: reject
+                }, cc.proxy)
+              }
+
+              ctx.draw(false, () => setTimeout(exp, 200))
+              // 兜底
+              setTimeout(exp, 1200)
+            } catch (e) { reject(e) }
+          }, 200)
+        } catch (e) { reject(e) }
+      },
+      fail: reject
+    })
+  })
+}
+// #endif
+
+/**
+ * 在 canvas context 上绘制水印条
+ * @param {boolean} isUni - true 用 uni canvas API，false 用 H5 canvas API
+ */
+function _stamp(ctx, w, h, lines, isUni) {
+  const fs = Math.max(Math.floor(w * 0.03), 14)
+  const pad = Math.floor(fs * 0.8)
+  const lh = fs + pad
+  const bgH = lh * lines.length + pad
+
+  if (isUni) {
+    ctx.setFillStyle('rgba(0,0,0,0.4)')
+    ctx.fillRect(0, h - bgH, w, bgH)
+    ctx.setFillStyle('#ffffff')
+    ctx.setFontSize(fs)
+    lines.forEach((t, i) => {
+      // uni canvas 的 fillText y 是文字顶部基线
+      ctx.fillText(t, pad, h - bgH + pad + lh * i)
+    })
+  } else {
+    ctx.fillStyle = 'rgba(0,0,0,0.4)'
+    ctx.fillRect(0, h - bgH, w, bgH)
+    ctx.fillStyle = '#ffffff'
+    ctx.font = `${fs}px sans-serif`
+    ctx.textBaseline = 'middle'
+    lines.forEach((t, i) => {
+      ctx.fillText(t, pad, h - bgH + pad / 2 + lh * i + fs / 2)
+    })
+  }
+}