正文

使用Camera API https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/Camera

IP云
IP云V管理员/9 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

使用Camera API

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

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

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

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

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

JavaScript文件: 

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

                        }

                    }

                }

            }

        };

    }

})();

浏览器兼容性EDIT
  • Desktop
  • Mobile
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Camera API Not supported Not supported Not supported Not supported Not supported
createObjectURL() 16 8.0 (8.0) 10+ Not supported Not supported
FileReader 16 3.6 (1.9.2) 10+ 11.6+ Not supported

相关阅读

目录[+]