当前位置：首页 > VUE

vue页面实现水印相机

2026-01-22 19:44:02VUE

vue页面实现水印相机

实现水印相机功能

在Vue中实现水印相机功能，可以通过结合HTML5的Canvas和拍照API完成。以下是一个完整的实现方案：

创建基础页面结构

<template>
  <div class="watermark-camera">
    <video ref="video" autoplay></video>
    <canvas ref="canvas"></canvas>
    <button @click="capture">拍照</button>
    <div v-if="photoTaken" class="result">
      <img :src="photoData" alt="水印照片"/>
      <button @click="download">下载照片</button>
    </div>
  </div>
</template>

初始化摄像头

export default {
  data() {
    return {
      photoData: null,
      photoTaken: false
    }
  },
  mounted() {
    this.initCamera()
  },
  methods: {
    async initCamera() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true })
        this.$refs.video.srcObject = stream
      } catch (err) {
        console.error('摄像头访问失败:', err)
      }
    }
  }
}

拍照并添加水印

methods: {
  capture() {
    const video = this.$refs.video
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')

    // 设置canvas尺寸与视频相同
    canvas.width = video.videoWidth
    canvas.height = video.videoHeight

    // 绘制视频帧到canvas
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

    // 添加水印
    ctx.font = '20px Arial'
    ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
    ctx.fillText('水印文字', 20, canvas.height - 20)

    // 转换为图片数据
    this.photoData = canvas.toDataURL('image/png')
    this.photoTaken = true
  }
}

下载功能实现

methods: {
  download() {
    const link = document.createElement('a')
    link.href = this.photoData
    link.download = 'watermark-photo.png'
    link.click()
  }
}

样式优化

.watermark-camera {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

video, canvas {
  width: 100%;
  border: 1px solid #ddd;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.result {
  margin-top: 20px;
  text-align: center;
}

.result img {
  max-width: 100%;
  border: 1px solid #eee;
}

注意事项

确保在组件销毁时关闭摄像头流
水印内容可以自定义，包括文字、日期时间等
考虑添加多个水印位置和样式的选项
移动端可能需要处理横竖屏适配问题

扩展功能

// 添加时间水印
const now = new Date()
ctx.fillText(now.toLocaleString(), canvas.width - 200, canvas.height - 20)

// 添加图片水印
const img = new Image()
img.src = '/path/to/watermark.png'
img.onload = function() {
  ctx.drawImage(img, 10, 10, 100, 50)
}

以上实现提供了基础的Vue水印相机功能，可以根据实际需求进一步扩展和完善。

vue页面实现水印相机