pc 和手机调用摄像头拍照 获取照片 好用
『 时光荏苒 』
帮助1人
前端何如在代码中使用摄像头拍照功能
demo 部署服务器可以测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input
type="file"
accept="video"
capture="user"
ref="videoFile"
@change="changeVideo"
class="file-input"
/>
</body>
</html>
<script>
function changeVideo (e) {
// 获取到input标签的上传的文件对象
const files = e.files[0];
console.log(files)
// 通过FileReader构造函数创建一个新的FileReader对象
let reader = new FileReader();
// 通过新创建的FileReader对象获取input元素上传的files文件对象，并使用readAsDataURL()方法读取
reader.readAsDataURL(file);
// 这是一个异步操作，当读取完成后，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
reader.onload = () => {
// 输出文件base64
console.log(reader.result)
}
}
</script>
解答疑惑
input type=“file“属性详解，利用capture调用手机摄像头
上传文件类型
当需要限制上传文件的类型时，就需要使用input标签的accept属性；accept属性：规定通过文件上传来提交的文件的类型。 （只针对type=“file”）
| accept属性值值 | 描述 |
|---|---|
| audio/* | 接受所有的声音文件 |
| video/* | 接受所有的视频文件 |
| image/* | 接受所有的图像文件 |
| MIME_type | 一个有效的 MIME 类型，不带参数 |
调用摄像头或麦克风
capture属性：用于调用设备的摄像头或麦克风
当accept="image/"或accept="video/"时：
| capture属性值 | 描述 |
|---|---|
| user | 手机前置摄像头 |
| environment | 手机后置摄像头 |
当accept="audio"时：只调用麦克风设备，capture属性值可以为任意值
当input没有capture属性时，根据accppt类型给出文件夹选项以及摄像头或者录音机选项
input含有multiple属性时访问文件夹可勾选多文件，调用系统摄像头或者录音机都只是单文件，无multiple时都只能单文件
使用前置摄像头录制视频，并获取视频base64
HTML部分
<!-- 当input的值发生改变时，触发change事件，调用changeVideo函数 -->
<input
type="file"
accept="video/*"
capture="user"
ref="videoFile"
@change="changeVideo"
class="file-input"
hidden
/>
js部分
changeVideo () {
// 获取到input标签的上传的文件对象
const files = this.$refs.videoFile.files;
// 通过FileReader构造函数创建一个新的FileReader对象
let reader = new FileReader();
// 通过新创建的FileReader对象获取input元素上传的files文件对象，并使用readAsDataURL()方法读取
reader.readAsDataURL(file);
// 这是一个异步操作，当读取完成后，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
reader.onload = () => {
// 输出文件base64
console.log(reader.result)
}
}
FileReader的部分实例方法
1.readAsArrayBuffer()：读取指定的Blob或File内容，当读取操作完成时触发loadend事件，同时result属性中将包含一个ArrayBuffer对象以表示所读取文件的数据。
2.readAsBinaryString()：读取指定的Blob或File内容，当读取操作完成时触发loadend事件，同时result属性中将包含所读取文件原始二进制格式。
3.readAsDataURL()：读取指定的Blob或File内容，当读取操作完成时触发loadend事件，同时result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
以上三个方法参数均为即将被读取的Blob或File对象
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgacejb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
