浅谈HTML5的Camera API

Camera API能够调用设备的摄像头拍照并上传到当前网页。使用input标签，设置type=”file”，accept属性设置为能接收图像，就能够实现前面的要求了。
浅谈HTML5的Camera API - 第1张 | 剑痴乎
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,

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

}

};

}

})();

测试页面：camera API
详细代码地址：https://github.com/robnyman/robnyman.github.com/tree/master/camera-api

本文固定链接: https://blog.jianchihu.net/talking-about-the-html5-camera-api.html
转载请注明: 作者：剑痴乎 | 代码为剑，如痴如醉本博客的原文链接

最后编辑：2019-12-01

作者：Jeff

管理员——代码为剑，如痴如醉

站内专栏

4 Responses to 浅谈HTML5的Camera API

走起来 says:
2014年6月18日 at pm2:10
Unknown Unknown
这种方法在小米手机uc浏览器下不能吊起照相机只能吊起图片库
- Jianchihu says:
  2014年6月18日 at pm3:14
  Unknown Unknown
  记得当时我只在chrome下测试，浏览器兼容性不一样，很难做到统一
Pingback: ヴィトンマルチ
FirstEdmundo says:
2017年11月4日 at pm11:07
Google Chrome 59.0.3071.86 Windows 7 x64 Edition
I see you don’t monetize your website, don’t waste your traffic,
you can earn extra bucks every month because you’ve got hi quality content.
If you want to know how to make extra money, search for: Boorfe’s tips best
adsense alternative