更新记录

1.0.0（2026-09-07） 下载此版本

• 组件功能：
  1. 拍照
  2. 添加水印（时间戳、水印文字、地理位置）
  3. 图片预览
  4. 图片上传（可选）
• 组件参数：
  1. defaultText: String，水印文字，默认 ''
  2. location：是否添加地理位置水印，默认 false
  3. timestamp：是否添加时间戳水印，默认 false
  4. sourceType: Array，照片来源，默认 ['camera']，可选值 ['camera', 'album']
  5. config：上传配置对象，包含以下属性：
     • enabled：是否启用上传功能，默认 false
     • property：上传文件的字段名，默认 'file'
     • url：上传接口地址，默认 ''
     • header：上传请求头，默认 {}
     • formData：上传额外表单数据，默认 {}

平台兼容性

uni-app(4.65)

其他

ziqirj-watermark-camera

• 组件名：ziqirj-watermark-camera
• 代码块： WatermarkCamera
• 关联组件：scss/sass

插件说明

• 组件功能：
  1. 拍照
  2. 添加水印（水印文字、地理位置、时间戳）
  3. 图片预览
  4. 图片上传（可选）
• 组件参数：
  1. defaultText: String，水印文字，默认 ''
  2. location：是否添加地理位置水印，默认 false
  3. timestamp：是否添加时间戳水印，默认 false
  4. sourceType: Array，照片来源，默认 ['camera']，可选值 ['camera', 'album']
  5. config：上传配置对象，包含以下属性：
     • enabled：是否启用上传功能，默认 false
     • property：上传文件的字段名，默认 'file'
     • url：上传接口地址，默认 ''
     • header：上传请求头，默认 {}
     • formData：上传额外表单数据，默认 {}

关于定位

• 地址逆解析使用的是腾讯地图
• 修改文件：TMapApi.js 中的txMapKey值为自己的腾讯地图key
• App平台/Web平台：manifest中配置好自己的腾讯地图key
• 微信小程序：manifest中启用位置接口

  Web平台：由于各浏览器均存在跨域问题，需做如下配置：

  1. 开发环境：manifest中，H5配置添加代理配置：

     "proxy" : {
     "/wx-map-api" : {
     "target" : "https://apis.map.qq.com/ws",
     "changeOrigin" : true,
     "secure" : false,
     "pathRewrite" : {
         "^/wx-map-api" : ""
     }
     }
     }

  2. 生产环境，以nginx为例，添加反向代理：

     location /wx-map-api/ {
     proxy_set_header Host apis.map.qq.com;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header REMOTE-HOST $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_ssl_server_name on;
     proxy_pass https://apis.map.qq.com/ws/;
     }

平台支持

使用说明

组件参数

回调函数

使用示例

<template>
    <ziqirj-page-view title="水印相机" :default-style="{backgroundColor: '#f5f5f5'}">
        <view style="width: 100%; height: 1px;"></view>
        <ziqirj-watermark default-text="自定义测试文本" :location="true" :timestamp="true" 
            :config="{enabled: true, property: 'file', url: 'http://localhost:9006/common/publish-upload'}" 
            @cancel="back" @confirm="confirmFm"/>
    </ziqirj-page-view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            back() {
                uni.navigateBack({
                    delta: 1
                })
            },
            confirmFm(res) {
                console.log('confirmFm', res)
            }
        }  
    }
</script>

<style>

</style>

依赖组件

scss/sass

如使用过程中有任何问题，或者您对组件有一些好的建议，欢迎留言

紫琪程序猿