浅谈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,