更新记录

1.0.2（2026-01-16） 下载此版本

本组件是基于 UniApp (Vue2) 开发的定制相机页面，专门用于满足微信小程序环境下带有实时信息水印的拍照需求。它通过原生 组件与离屏 技术，实现了将时间、地

平台兼容性

其他

水印相机小程序功能说明文档

1. 项目概述

本组件是基于 UniApp (Vue2) 开发的定制相机页面，专门用于满足微信小程序环境下带有实时信息水印的拍照需求。它通过原生 <camera> 组件与离屏 <canvas> 技术，实现了将时间、地点、人员信息硬编码到照片中的功能。

2. 核心功能模块

2.1 实时拍摄

• 双摄像头支持：支持一键切换前置/后置摄像头（通过控制 device-position 属性）。
• 实时预览：在相机取景框中实时叠加水印 UI 层，实现“所见即所得”的拍摄体验。

2.2 自动动态水印

• 时间戳记：自动获取当前系统时间，精确到秒（YYYY-MM-DD HH:mm:ss），并随时间实时刷新。
• 地理定位：页面加载时自动请求经纬度信息。
• 固定信息：支持预设拍摄人员姓名（如：张三）。

2.3 图像处理与合成

• 离屏合成：利用 CanvasContext 在后台将原始照片与水印信息进行像素级融合。
• 自适应比例：自动检测原始照片分辨率（如 1080P 或 4K），按比例调整水印字号，确保在不同手机上水印清晰度一致。
• 渲染优化：为文字添加了半透明投影（Shadow），确保在复杂背景（如白墙或强光）下水印依然清晰可辨。

2.4 预览与存储

• 在线预览：拍照完成后自动进入预览模式，展示合成后的最终图片。
• 重拍机制：预览不满意时可一键销毁当前缓存，返回相机模式。
• 保存相册：支持将合成后的图片保存至手机原生相册。

3. 技术实现方案

3.1 关键逻辑架构

1. UI 层：采用绝对定位（Absolute Positioning）将水印 view 覆盖在 <camera> 之上。
2. 数据层：通过 setInterval 每秒更新一次时间变量，通过 uni.getLocation 异步获取地理位置。
3. 合成层：
   • takePhoto 获取临时路径。
   • getImageInfo 获取图片原始尺寸。
   • draw 指令依次绘制底图、设置字体、绘制文本。
   • canvasToTempFilePath 导出成品图。

3.2 兼容性与适配

• 暗黑模式：通过 CSS 媒体查询 @media (prefers-color-scheme: dark) 适配了底栏与按钮的背景颜色，确保弱光环境下的视觉舒适度。
• 权限管理：逻辑中预留了权限调用接口，兼容微信小程序隐私协议要求。

4. 交互操作流程