剑痴乎

  • 首页
  • 文章分类
    • 音视频
    • WebRTC
    • 编程之美
    • Linux
    • Windows
    • 生活点滴
    • 校园生活
  • 参考
    • API参考
    • 实用工具
    • 测试音视频
    • 文档
  • 留言板
  • 关于
剑痴乎
代码为剑,如痴如醉
  1. 首页
  2. 编程之美
  3. 正文

浅谈HTML5的Camera API

2013年10月12日 686点热度 0人点赞 4条评论

Camera API能够调用设备的摄像头拍照并上传到当前网页。使用input标签,设置type="file",accept属性设置为能接收图像,就能够实现前面的要求了。

HTML代码如下:

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

当使用者选择激活这个HTML元素时,它们就会以选择某个文件的选项形式呈现出来,设备摄像头就是其中一个选项。如果用户选择了摄像头选项,就进入了拍照模式。拍完照后,用户要在弹出的选项里选择接受或放弃。如果选择接受的话,将会跳到

1
<input type="file">

标签,onchange事件被激发。

在File API的帮助下我们能够访问拍完的照片或者被选中的文件:

1
2
3
4
5
6
7
8
9
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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是可供选择的替代方案:

1
2
3
4
5
6
// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!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";
                        }
                    }
                }
            }
        };
    }
})();

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

本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
标签: html5
最后更新:2019年12月1日

Jeff Young

代码为剑,如痴如醉

打赏 点赞
< 上一篇
下一篇 >

文章评论

  • 走起来

    这种方法在小米手机uc浏览器下不能吊起照相机只能吊起图片库

    2014年6月18日
    回复
    • Jianchihu

      @走起来 记得当时我只在chrome下测试,浏览器兼容性不一样,很难做到统一

      2014年6月18日
      回复
  • FirstEdmundo

    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

    2017年11月4日
    回复
  • 取消回复

    我的其它小窝

    公众号:码上Play(基本不更新,回答问题用)

    近期评论
    • Jeff on WebRTC研究:BBR拥塞控制被移除了研究过了,等后面有时间简单说明下
    • xhcx on WebRTC研究:BBR拥塞控制被移除了楼主,BBR移除的原因最近有研究吗,分享一下
    • Jeff on Windows平台WebRTC编译(持续更新)M79是2019年发布的版本,不适用这篇文章。编译…
    • haige on Windows平台WebRTC编译(持续更新)我编译的m79版本,用VS2019打开会报错, F…
    • 菜菜 on libcef编译使用--使用VS2015是真的鸟
    版权声明

    为支持原创,创作更好的文章,未经许可,禁止任何形式的转载与抄袭,如需转载请邮件私信!本人保留所有法定权利。违者必究!

    COPYRIGHT © 2021 剑痴乎. ALL RIGHTS RESERVED.

    THEME KRATOS MADE BY VTROIS