使用Camera API

1. 获取到所拍摄照片的引用
2. 在网页中展示图片
3. 完整的示例代码
   1. HTML页面:
   2. JavaScript文件:
4. 浏览器兼容性

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

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

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

获取到所拍摄照片的引用EDIT

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

var takePicture = document.querySelector("#take-picture");
takePicture.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();
fileReader.onload = function (event) {
    showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);

完整的示例代码EDIT

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

HTML页面:

>
    >
        charset="utf-8">
        >Camera API>
        rel="stylesheet" href="css/base.css" type="text/css" media="screen">
    >

    >

        
class="container">
            >Camera API>

            
class="main-content">
                >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).>
                
                >
                    type="file" id="take-picture" accept="image/*">
                >

                >Preview:>
                >
                    src="about:blank" alt="" id="show-picture">
                >

                
id="error">>

            >

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


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


    >
>

(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";
                        }
                    }
                }
            }
        };
    }
})();