使用Camera

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

当用户点击激活这个input后，我们可以选择本地的图片文件，也可以通过摄像头直接拍摄照片作为所选文件。

选择了图片后，会触发该元素的onchange事件，这时，我们可以通过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];
    }
};

在网页中展示图片

如果你获取到了那张照片的引用(也就是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);

完整代码

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