vue 实现打开带水印的相机

您可以使用`Vue.js`和`HTML5`的`MediaDevices.getUserMedia()`方法来实现打开带水印的相机应用程序。以下是实现此目标的步骤：

1. 建立Vue.js应用程序并导入所需的库。

import Vue from 'vue'
import watermark from 'watermarkjs'

2. 在Vue.js模板中呈现带有水印的视频元素和拍照按钮。

<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="takePicture">Take Picture</button>
  </div>
</template>

3. 在Vue.js组件中初始化视频元素和水印。

export default {
  mounted() {
    this.initCamera()
    this.initWatermark()
  },
  methods: {
    initCamera() {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
          const video = this.$refs.video
          video.srcObject = stream
          video.onloadedmetadata = () => {
            video.play()
          }
        })
    },
    initWatermark() {
      const video = this.$refs.video
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const wm = watermark([video, 'watermark text'], {
        init(img) {
          canvas.width = img.naturalWidth
          canvas.height = img.naturalHeight
        },
        render(img, data) {
          ctx.drawImage(img, 0, 0)
          ctx.font = 'bold 32px Arial'
          ctx.fillStyle = 'white'
          ctx.fillText(data[1], 10, canvas.height - 10)
        }
      })
      setInterval(() => {
        wm.render()
        video.srcObject = canvas.captureStream()
      }, 1000)
    },
    takePicture() {
      const video = this.$refs.video
      const canvas = document.createElement('canvas')
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      const ctx = canvas.getContext('2d')
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
      const image = canvas.toDataURL()
      console.log(image)
    }
  }
}

4. 运行应用程序并单击“Take Picture”按钮以拍摄照片。

这样，您就可以在Vue.js应用程序中创建带有水印的相机应用程序。请注意，此示例仅适用于最新版本的Chrome和Firefox浏览器。