
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
vue3-watermark-camera
Advanced tools
一个完全解耦的 Vue 3 水印相机组件,支持多种配置和自定义功能。
npm install watermark-camera
# 使用 npm
npm run dev
# 使用 PowerShell
.\start-dev.ps1
# 使用批处理文件 (Windows)
start-dev.bat
开发服务器支持局域网访问,可以通过以下地址访问:
<template>
<div>
<WatermarkCamera
v-model="photoUrl"
name="张三"
company="某某公司"
@upload-success="handleUploadSuccess"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { WatermarkCamera } from 'watermark-camera'
const photoUrl = ref('')
const handleUploadSuccess = (data) => {
console.log('上传成功:', data)
}
</script>
<template>
<div>
<WatermarkCamera
v-model="photoUrl"
:watermark-config="watermarkConfig"
:location-config="locationConfig"
:time-config="timeConfig"
:upload-config="uploadConfig"
:camera-config="cameraConfig"
@location-success="handleLocationSuccess"
@time-success="handleTimeSuccess"
@camera-success="handleCameraSuccess"
@upload-success="handleUploadSuccess"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { WatermarkCamera } from 'watermark-camera'
const photoUrl = ref('')
// 水印配置
const watermarkConfig = {
showTime: true,
showLocation: true,
showName: true,
showCompany: true,
backgroundColor: 'rgba(0,0,0,0.6)',
textColor: '#ffffff',
fontSize: 16
}
// 定位配置
const locationConfig = {
enableLocation: true,
locationProvider: 'h5', // 'h5' | 'dingtalk' | 'custom'
customLocationFn: async () => {
// 自定义定位逻辑
return { latitude: 39.9, longitude: 116.4, address: '北京市' }
}
}
// 时间配置
const timeConfig = {
enableNetworkTime: true,
networkTimeUrl: 'https://api.example.com/time',
customTimeFn: async () => {
// 自定义时间获取逻辑
return new Date().toLocaleString()
}
}
// 上传配置
const uploadConfig = {
enableAutoUpload: true,
customUploadFn: async (file) => {
// 自定义上传逻辑
const formData = new FormData()
formData.append('file', file)
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
})
return response.json()
}
}
// 相机配置
const cameraConfig = {
enableCamera: true,
customCameraFn: async () => {
// 自定义相机逻辑
return 'data:image/jpeg;base64,...'
}
}
const handleLocationSuccess = (location) => {
console.log('定位成功:', location)
}
const handleTimeSuccess = (time) => {
console.log('时间获取成功:', time)
}
const handleCameraSuccess = (filePath) => {
console.log('拍照成功:', filePath)
}
const handleUploadSuccess = (data) => {
console.log('上传成功:', data)
}
</script>
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
modelValue | String | - | 图片 URL,支持 v-model |
name | String | '用户' | 水印中显示的用户姓名 |
company | String | '公司' | 水印中显示的公司名称 |
action | String | 'url' | 图片上传接口地址 |
amapKey | String | 'xxx' | 高德地图 API Key |
watermarkConfig | Object | - | 水印配置项 |
locationConfig | Object | - | 定位配置项 |
timeConfig | Object | - | 时间配置项 |
uploadConfig | Object | - | 上传配置项 |
cameraConfig | Object | - | 相机配置项 |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
showTime | Boolean | true | 是否显示时间 |
showLocation | Boolean | true | 是否显示位置 |
showName | Boolean | true | 是否显示姓名 |
showCompany | Boolean | true | 是否显示公司 |
backgroundColor | String | 'rgba(0,0,0,0.5)' | 水印背景色 |
textColor | String | '#fff' | 水印文字颜色 |
fontSize | Number | 14 | 水印字体大小 |
height | Number | 110 | 水印高度 |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
enableLocation | Boolean | true | 是否启用定位 |
locationProvider | String | 'h5' | 定位提供者:'h5' | 'dingtalk' | 'custom' |
customLocationFn | Function | - | 自定义定位函数 |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
enableNetworkTime | Boolean | true | 是否启用网络时间 |
networkTimeUrl | String | '' | 网络时间接口 |
customTimeFn | Function | - | 自定义时间获取函数 |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
enableAutoUpload | Boolean | true | 是否启用自动上传 |
customUploadFn | Function | - | 自定义上传函数 |
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
enableCamera | Boolean | true | 是否启用相机 |
customCameraFn | Function | - | 自定义相机函数 |
事件名 | 参数 | 说明 |
---|---|---|
update:modelValue | (value: string) | 图片 URL 更新时触发 |
upload-success | (data: any) | 图片上传成功时触发 |
location-success | (location: LocationResult) | 定位成功时触发 |
location-error | (error: any) | 定位失败时触发 |
time-success | (time: string) | 时间获取成功时触发 |
time-error | (error: any) | 时间获取失败时触发 |
camera-success | (filePath: string) | 拍照成功时触发 |
camera-error | (error: any) | 拍照失败时触发 |
组件暴露以下方法供外部调用:
<template>
<WatermarkCamera ref="cameraRef" />
</template>
<script setup>
import { ref } from 'vue'
import { WatermarkCamera } from 'watermark-camera'
const cameraRef = ref()
// 手动拍照
const takePhoto = async () => {
await cameraRef.value.takePhoto()
}
// 删除照片
const deletePhoto = () => {
cameraRef.value.deletePhoto()
}
// 获取定位
const getLocation = async () => {
const location = await cameraRef.value.getLocation()
console.log('定位结果:', location)
}
// 获取网络时间
const getTime = async () => {
const time = await cameraRef.value.getNetworkTime()
console.log('网络时间:', time)
}
</script>
组件使用 scoped 样式,可以通过以下方式定制:
<template>
<WatermarkCamera class="custom-camera" />
</template>
<style>
.custom-camera .camera-btn {
background: #007bff;
border-radius: 12px;
}
.custom-camera .camera-icon {
opacity: 0.8;
}
.custom-camera .thumb-img {
border-radius: 12px;
border: 2px solid #007bff;
}
</style>
navigator.geolocation
APIinput[type=file]
调用相机# 安装依赖
npm install
# 开发模式
npm run dev
# 构建
npm run build
# 类型检查
npm run type-check
MIT
本项目使用 GitHub Actions 进行自动化发布:
git tag v1.0.1 && git push origin v1.0.1
欢迎提交 Issue 和 Pull Request!
FAQs
A Vue 3 component for taking photos with watermark support
The npm package vue3-watermark-camera receives a total of 1 weekly downloads. As such, vue3-watermark-camera popularity was classified as not popular.
We found that vue3-watermark-camera demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.