前端调用摄像头拍照，并使用 Vue Cropper 进行裁剪

安装与引入

通过 npm 或 yarn 安装 vue-cropper：

npm install vue-cropper
# 或
yarn add vue-cropper

在 Vue 组件中引入：

import { VueCropper } from 'vue-cropper'

环境与权限配置

现代浏览器默认禁止 HTTP 站点调用摄像头等敏感设备。建议优先使用 HTTPS 协议部署。

若必须在 HTTP 环境下（如 localhost）测试，需在 Chrome 地址栏输入 chrome://flags/ 并调整以下设置：

• Insecure origins treated as secure：填入需要启用摄像头的 HTTP 地址（如 http://localhost:8080）。
• Enable screen capture support in getUserMedia：设置为 Enabled。
• Allow insecure origins to use powerful features：设置为 Enabled。

修改后点击 Relaunch 重启浏览器。同时确保在 chrome://settings/content/camera 中未阻止目标网站。

核心功能实现

1. 调用摄像头

基于 navigator.mediaDevices.getUserMedia API 获取视频流：

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    const video = document.getElementById('video')
    video.srcObject = stream
  })
  .catch(error => {
    console.error('Error accessing camera:', error)
  })

2. 拍照并转换为图片

将视频帧绘制到 Canvas，再转换为 Base64 供 Vue Cropper 使用：

setImage() {
  const canvas = .()
   video = .()
   ctx = canvas.()
  ctx.(video, , , canvas., canvas.)
  .. = canvas.()
}