最近有遇到这样的需求，在开发过程中也踩了很多的坑，所以记录一下自己最后找到的解决方法。
图片上传预览
使用webAPI接口的FileReader方法来读取input file上传的图片信息。
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
- FileReader()
构造函数方法，返回一个新构造的FileReader对象。 - FileReader.readAsDataURL()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。 - FileReader.onload
处理load事件。该事件在读取操作完成时触发。
实现代码如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15//html
<input id="fileBtn" type="file" onchange="upload();" accept="image/*"/>
<img src="" id="img"/>
//js
var upload = function(){
var file = document.querySelector('#fileBtn'),
img = document.querySelector('#img'),
reader = new FileReader();
file = file.files[0];
reader.readAsDataURL(file);
reader.onload = function(e){
img.setAttribute("src", e.target.result);
};
};
调用摄像头
在做这个功能时，最早查到的是Navigator.getUserMedia()这个方法，而且对于这个方法介绍的也比较多，但是在查询MDN文档后发现，这个特性已经从Web标准中删除，但是目前仍有一些浏览器支持，而新版的API已经修改为MediaDevices.getUserMedia()方法，这就需要我们在使用的时候注意浏览器兼容性。
MediaDevices.getUserMedia()方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。如果用户给予许可，就返回一个Promise 对象，MediaStream对象作为此Promise对象的Resolved状态的回调函数参数，相应的，如果用户拒绝了许可，或者没有媒体可用的情况下，PermissionDeniedError 或者NotFoundError作为此Promise的Rejected状态的回调函数参数。
因此在使用时，我们需要在考虑兼容性的情况下对方法进行修改：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function(constraints) {
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
使用getUserMedia()必须保证安全的环境，也就是本地，localhost或者https协议下才可以运行，http无法使用
调用方法实现功能:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20//html
<video src=""></video>
//js
function successFunc(stream) {
var video = document.querySelector('video');
if ("srcObject" in video) {
video.srcObject = stream
} else {
video.src = window.URL && window.URL.createObjectURL(stream) || stream
}
video.play();
}
function errorFunc(err) {
alert(err.name);
}
navigator.getUserMedia({
audio: false,
video: true,
}, successFunc, errorFunc);