您的位置：首页 > 理论基础 > 计算机网络

使用Camera API https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/Camera

2016-02-16 14:00 726 查看

使用Camera API

在本文章中

获取到所拍摄照片的引用

在网页中展示图片


完整的示例代码
HTML页面:

JavaScript文件:

浏览器兼容性


通过Camera API,你可以使用手机的摄像头拍照,然后把拍到的照片发送给当前网页.这些操作主要是通过一个
input元素
来实现的,其中该元素的
type属性必须为"file",
accept属性要允许图片格式,
这样才能知道这个文件选择框是用来选择图片的.,完整的HTML结构看起来是这样的:

<]type="file" id="take-picture" accept="image/*">

当用户激活这个HTML元素的时候,系统会呈现给用户一个选择界面,其中一个选项是选择本地的图片文件,另一个选项是要通过摄像头直接 拍摄照片作为所选文件.如果用户选择了摄像头,则会进入手机的拍照模式.拍照结束后,,用户可以选择确定还是放弃.如果接受了,则该照片会作为所选文件发 送给那个
<input type="file">
元素,同时触发该元素的
onchange事件
.

获取到所拍摄照片的引用EDIT
通过File API,你可以获取到用户所拍摄的照片或者所选择的图片文件的引用:

var takePicture = document.querySelector("#take-picture")].onchange = function (event) {
// 获得图片文件的引用
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
}
};

在网页中展示图片EDIT
如果你获取到了那张照片的引用(也就是File对象),你就可以使用
window.URL.createObjectURL()
方法创建一个指向那个照片的URL,然后把得到的URL赋给
img
元素的
src属性
:

// 获取到img元素
var showPicture = document.querySelector("#show-picture")]// 获取到window.URL对象
var URL = window.URL || window.webkitURL;

// 创建一个对象URL字符串
var imgURL = URL.createObjectURL(file);

// 设置img元素的src属性为那个URL
showPicture.src = imgURL;

// 释放那个对象URL,提高性能
URL.revokeObjectURL(imgURL);

如果浏览器不支持
createObjectURL()
方法,还可以使用
FileReader
来实现:

// 如果createObjectURL方法不可用
var fileReader = new FileReader()].onload = function (event) {
showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);

完整的示例代码EDIT
这里有一个完整的使用Camera API的demo,下面是这个demo的完整代码:

HTML页面:
<]<html>
<head>
<meta charset="utf-8">
<title>Camera API</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
</head>

<body>

<div class="container">
<h1>Camera API</h1>

<section class="main-content">
<p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>

<p>
<input type="file" id="take-picture" accept="image/*">
</p>

<h2>Preview:</h2>
<p>
<img src="about:blank" alt="" id="show-picture">
</p>

<p id="error"></p>

</section>

<p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p>
</div>

<script src="js/base.js"></script>

</body>
</html>

JavaScript文件:
(function () {
var takePicture = 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
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
try {
// Get window.URL object
var URL = window.URL || window.webkitURL;

// Create ObjectURL
var imgURL = 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
var fileReader = new FileReader();
fileReader.onload = function (event) {
showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);
}
catch (e) {
//
var error = document.querySelector("#error");
if (error) {
error.innerHTML = "Neither createObjectURL or FileReader are supported";
}
}
}
}
};
}
})();

浏览器兼容性EDIT
Desktop

Mobile

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Camera APINot supportedNot supportedNot supportedNot supportedNot supported
createObjectURL()
168.0 (8.0)10+Not supportedNot supported
FileReader
163.6 (1.9.2)10+11.6+Not supported

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航