浅谈HTML5的Camera API
来源:互联网 发布:50兆宽带能看网络电视 编辑:程序博客网 时间:2024/05/22 00:12
通过Camera API能够用你的设备的摄像头拍照并上传到当前网页。通过使用input标签,设置type=”file”,accept属性设置为能接收图像,就能够实现前面的要求了。HTML代码如下:
当使用者选择激活这个HTML元素时,他们就会以选择某个文件的选项形式呈现出来,设备摄像头就是其中一个选项。如果用户选择了摄像头选项,就进入了拍照模式。拍完照后,用户要在弹出的选项里选择接受或放弃。如果选择接受的话,将会跳到
标签,onchange事件被激发。
在File API的帮助下你能够访问拍完的照片或者被选中的文件:
如果你想要引用拍好的照片,你可以使用window.URL.createObjectURL()方法生成一个引用照片的URL并设置为图片的src:
如果浏览器不支持createObjectURL()方法,FileReader是可供选择的替代方案:
如果你想要知道运行结果是什么样的,你可以看下完整的Camera API示例。
示例代码如下:
HTML PAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>CameraAPI</title>
<linkrel="stylesheet"href="css/base.css"type="text/css"media="screen">
</head>
<body>
<divclass="container">
<h1>CameraAPI</h1>
<sectionclass="main-content">
<p>AdemooftheCameraAPI,currentlyimplementedinFirefoxandGoogleChromeonAndroid.Choosetotakeapicturewithyourdevice'scameraandapreviewwillbeshownthroughcreateObjectURLoraFileReaderobject(choosinglocalfilessupportedtoo).</p>
<p>
<inputtype="file"id="take-picture"accept="image/*">
</p>
<h2>Preview:</h2>
<p>
<imgsrc="about:blank"alt=""id="show-picture">
</p>
<pid="error"></p>
</section>
<pclass="footer">Allthecodeisavailableinthe<ahref="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">CameraAPIrepositoryonGitHub</a>.</p>
</div>
<scriptsrc="js/base.js"></script>
</body>
</html></code>
<strong>JavaScriptfile</strong>
<code>(function(){
vartakePicture=document.querySelector("#take-picture"),
showPicture=document.querySelector("#show-picture");
if(takePicture&&showPicture){
// Set events
takePicture.onchange=function(event){
// Get a reference to the taken picture or chosen file
varfiles=event.target.files,
file;
if(files&&files.length>0){
file=files[0];
try{
// Get window.URL object
varURL=window.URL||window.webkitURL;
// Create ObjectURL
varimgURL=URL.createObjectURL(file);
// Set img src to ObjectURL
showPicture.src=imgURL;
// Revoke ObjectURL
URL.revokeObjectURL(imgURL);
}
catch(e){
try{
// Fallback if createObjectURL is not supported
varfileReader=newFileReader();
fileReader.onload=function(event){
showPicture.src=event.target.result;
};
fileReader.readAsDataURL(file);
}
catch(e){
//
varerror=document.querySelector("#error");
if(error){
error.innerHTML="Neither createObjectURL or FileReader are supported";
}
}
}
}
};
}
})();
长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”,带你探索前端的奥秘。
0 0
- 浅谈HTML5的Camera API
- Android Camera Api的心得
- Android Camera Api的心得
- HTML5+规范:Camera(管理设备的摄像头)
- HTML5 API的威力
- HTML5的Geolocation API
- html5的API
- HTML5新的API
- HTML5的History API
- html5 的API
- Camera API
- Camera API
- Camera api
- 浅谈HTML5 WebSocket的机制
- 浅谈HTML5 WebSocket的机制
- 浅谈HTML5的FormData对象
- 使用Camera2 替代过时的Camera API
- 使用Camera2 替代过时的Camera API
- gcc 编译处理过程
- sscanf函数用法详解
- Spring4 MVC json问题(406 Not Acceptable)
- 超声检测试块
- android更新UI的方法
- 浅谈HTML5的Camera API
- 架构之路(一):目标
- ios视图frame和bounds的对比
- kafka与storm集成测试问题小结
- EditText + ListView 之间的搜索配置 动态加载ListView数据
- 360笔试编程题 找老乡(BFS解法)
- iOS开发之UITextView,设置textView的行间距及placeholder
- 配置文件中参数的设定与读取
- 实训心得和面试经验