更新记录

1.3.1（2026-08-11）

changelog

1.3.1（2026-08-11）

修复

• 非 H5 端 :key 不支持字符串拼接表达式，改为使用 item.index

文档 / 市场

• 完善 README（授权价格、页内地址门禁、系统相机烧录前定位等）
• package.json：普通授权 19.90 元，源码授权 168.00 元
• 补充插件声明（权限 / 数据说明）、type: component-vue

1.3.0（2026-08-11）

新增

• preferSystemCamera：系统相机模式（uni.chooseMedia / chooseImage，sourceType: ['camera']）
• 进页可自动拉起系统相机；重拍再次拉起
• 系统相机：进页不提前定位，烧录前强制获取地址
• 页内实时相机：开启地址时须拿到完整逆地理地址才允许拍照
• 双指捏合变焦（setZoom）+ 倍率提示
• 配置项 burnMaxSide / burnReadyDelay

优化

• 配置缓存 mergedCfg，避免每秒 deep merge
• 时钟每秒仅更新时间行，降低 cover-view 刷新成本
• 拍照成功立刻卸载 <camera>，加载遮罩覆盖中间态
• Logo 正方形展示；预览水印仅用 left/top 定位，修复四角错位
• 烧录 canvas 透明不闪屏；默认最长边 3072
• 结果页：重拍 / 保存相册

说明

• 配置对象请使用 :config，勿用 :options（与微信小程序 component options 冲突）
• 错误事件请使用 @fail

1.2.x 及更早

• 基础页内水印相机：时间 / 经纬度 / 地址 / Logo
• 四角位置、闪光灯 / 翻转 / 变焦档位
• 三图商逆地理（腾讯 / 高德 / 百度）
• 页面级烧录 canvas（page-burn-canvas-id）
• 兼容 Vue2 / Vue3、微信小程序 / App / H5 兜底

平台兼容性

uni-app(5.0)

uni-app x(5.0)

水印相机（camera-geo-watermark）

文档更新：2026-08-11 · 版本 1.3.1
版本变更见同目录 changelog.md

兼容 微信小程序 / App / H5（系统相机兜底） 的可配置地理水印相机。支持页内实时预览烧录，或拉起系统相机拍完再烧录。

授权与价格

价格同步配置于 package.json → dcloudext.sale（regular / sourcecode）。以插件市场上架审核结果为准。

重要约定

1. 配置对象请使用 :config，不要用 :options
   微信小程序里 export default.options 是组件字段（如 styleIsolation），同名 prop 会导致业务配置失效。
2. 错误事件用 @fail（避免与页面 onError 冲突）。
3. 微信端烧录请优先使用页面级 canvas（page-burn-canvas-id），比组件内离屏更稳。

功能概览

快速接入

<template>
  <view class="page">
    <camera-geo-watermark
      :config="opts"
      page-burn-canvas-id="wmPageBurnCanvas"
      @burn-canvas-resize="onBurnResize"
      @success="onSuccess"
      @fail="onFail"
    />
    <canvas
      canvas-id="wmPageBurnCanvas"
      id="wmPageBurnCanvas"
      :width="burnW"
      :height="burnH"
      :style="burnStyle"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      burnW: 300,
      burnH: 400,
      opts: {
        position: 'bottom-left',
        showTime: true,
        showAddress: true,
        showLogo: true,
        logoSrc: '/static/watermark-logo.png',
        mapProvider: 'amap',
        mapKey: '你的Key',
        autoBurn: true,
        preferSystemCamera: false
      }
    }
  },
  computed: {
    burnStyle() {
      return (
        'position:fixed;left:0;top:0;width:' +
        this.burnW +
        'px;height:' +
        this.burnH +
        'px;opacity:0;z-index:-1;pointer-events:none;'
      )
    }
  },
  methods: {
    onBurnResize(p) {
      if (p.width) this.burnW = p.width
      if (p.height) this.burnH = p.height
    },
    onSuccess(res) {
      // res.tempFilePath / originalPath / location / burned
    },
    onFail(err) {}
  }
}
</script>

零配置：

<camera-geo-watermark @success="onSuccess" />

地图 Key 默认读 libs/config.js。

两种拍照模式

1. 页内实时相机（默认）

• preferSystemCamera: false（默认）
• 使用组件内 <camera>，可实时看水印、变焦、闪光
• 快门：CameraContext.takePhoto → 立刻卸相机 → 烧录
• 开启地址时：须拿到完整逆地理地址后才允许拍照（定位中/失败会禁用快门，可点提示重试）

2. 系统相机（可选）

{
  preferSystemCamera: true,
  autoBurn: true
}

• 不挂载页内 <camera>
• 进页（无 inputImage）或点快门 / 重拍：调用

uni.chooseMedia({
  count: 1,
  mediaType: ['image'],
  sourceType: ['camera'],
  sizeType: ['original']
})

• 不可用时回退 uni.chooseImage({ sourceType: ['camera'] })
• 系统界面内无实时水印；返回后先定位再烧录（进页不提前定位）
• 适用：对比测试、省预览性能、H5（本身无页内 camera）

演示工程首页提供「系统相机」开关；也可在 config / storage 中设置 preferSystemCamera。

配置优先级

libs/defaults.js ＜ libs/config.js（地图）＜ :config ＜ 单独 props

未传入的布尔 props 不会盖掉默认值（pickPassedProps）。

import { defaults, resolveOptions } from '@/uni_modules/camera-geo-watermark'

config 字段

事件

对外方法（ref）

性能说明（1.3.x）

• 配置 缓存合并（mergedCfg），避免每秒 deep merge
• 时钟每秒 只更新时间行，不重建整表 cover-view
• 拍照成功 立刻卸载 <camera>
• 烧录默认最长边 3072、就绪等待可配；canvas 保持透明不闪屏
• 双指变焦对 setZoom 节流
• 页内模式地址未就绪时锁快门；系统相机模式烧录前再取地址

地图 Key

编辑 libs/config.js，或在 config 传 mapProvider + mapKey。

小程序还需在后台开通定位相关权限与隐私协议说明。

常见问题

Q: 为什么预览左右对齐曾错位？
A: cover-view 对 right/bottom/text-align 支持差。现用 left+top 像素定位，右侧按内容宽贴边。

Q: 系统相机能实时叠水印吗？
A: 不能。系统界面独立；只能拍完再烧录。要实时预览请用默认页内相机。

Q: 系统相机模式下地址不准/为空？
A: 系统相机模式不会在进页时定位（此时多在系统拍照界面）。拍完返回后、烧录前再强制 getLocation（force），保证水印地址是合成时刻的。

Q: 页内相机为什么点不了拍照？
A: 开启了地址水印时，须等完整逆地理地址（非「定位中… / 未知位置 / 纯坐标」）后才开放快门。失败可点底部提示重试定位。关闭 showAddress 则不限制。

Q: wx.createCameraContext() 是否更好？
A: 微信端 uni.createCameraContext 即封装 wx；组件内相机须绑定组件实例（this / $scope），裸调无参只适合页面级唯一 camera，效果不会更好。

Q: 父页如何只测系统相机？
演示页打开「系统相机」开关即可；或：

uni.setStorageSync('wm_camera_config', {
  preferSystemCamera: true,
  autoBurn: true,
  mapProvider: 'amap',
  mapKey: 'xxx'
})
uni.navigateTo({ url: '/pages/watermark-camera/index' })

目录

camera-geo-watermark/
  components/camera-geo-watermark/camera-geo-watermark.vue
  libs/
    defaults.js          # 默认配置
    config.js            # 地图 Key
    merge-options.js
    watermark-renderer.js
    providers/datetime.js
    providers/location.js
  index.js
  package.json
  README.md

演示

工程内：pages/index 配置 → pages/watermark-camera 拍摄。