浅谈HTML5的Camera API

Camera API能够调用设备的摄像头拍照并上传到当前网页。使用input标签，设置type="file"，accept属性设置为能接收图像，就能够实现前面的要求了。

HTML代码如下：

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

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

当使用者选择激活这个HTML元素时，它们就会以选择某个文件的选项形式呈现出来，设备摄像头就是其中一个选项。如果用户选择了摄像头选项，就进入了拍照模式。拍完照后，用户要在弹出的选项里选择接受或放弃。如果选择接受的话，将会跳到

<input type="file">

1	<input type="file">

标签，onchange事件被激发。

在File API的帮助下我们能够访问拍完的照片或者被选中的文件：

var takePicture = document.querySelector("#take-picture");
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];
}
};

var takePicture = document.querySelector("#take-picture");

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];

}

};

如果想要引用拍好的照片，可以使用window.URL.createObjectURL()方法生成一个引用照片的URL并设置为图片的src:

// Image reference
var showPicture = document.querySelector("#show-picture");
// 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;
// For performance reasons, revoke used ObjectURLs
URL.revokeObjectURL(imgURL);

// Image reference

var showPicture = document.querySelector("#show-picture");

// 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;

// For performance reasons, revoke used ObjectURLs

URL.revokeObjectURL(imgURL);

如果浏览器不支持createObjectURL()方法，FileReader是可供选择的替代方案：

// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file)

// Fallback if createObjectURL is not supported

var fileReader = new FileReader();

fileReader.onload = function (event) {

showPicture.src = event.target.result;

};

fileReader.readAsDataURL(file)

如果想要知道运行结果是什么样的，可以看下完整的Camera API示例。

示例代码如下：
HTML PAGE

<!DOCTYPE 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></code>
<strong>JavaScript file</strong>
<code>(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";
}
}
}
}
};
}
})();

<!DOCTYPE html>

<html>

<head>

<title>Camera API</title>

</head>

<body>

<h1>Camera API</h1>

<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>

</p>

<h2>Preview:</h2>

<p>

</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>

</body>

</html></code>

<strong>JavaScript file</strong>

<code>(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,