Vue调用PC摄像头实现拍照功能

本文实例为大家分享了Vue调用PC摄像头实现拍照功能的具体代码，供大家参考，具体内容如下

项目需求：可以本地上传头像，也可以选择拍摄头像上传。

组件：

1、Camera组件：实现 打开、关闭摄像头、绘制、显示图片、用于上传
2、CameraDialog组件：使用ElementUI dialog组件 展示摄像头UI效果
3、外部调用CameraDialog组件，实现拍摄头像上传功能
4、本地上传可使用原生input、也可使用ElementUI upload组件

操作逻辑：

1、新增时将头像图片转为base64调用接口提交，返回url地址用于前端展示
2、替换时，先执行删除操作，在依新增操作执行。
3、本地上传原理跟拍摄上传一致

具体实现方法：

Camera组件

CameraDialog组件

外部调用组件

以上只作为实现参考，具体操作依实际需求做相应调整。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。