安装与引入
通过 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.()
}

