首页 > 编程之美 > 浅谈HTML5的Camera API
2013
10-12

浅谈HTML5的Camera API

浅谈HTML5的Camera API - 第1张  | Jianchihu

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

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

标签,onchange事件被激发。

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

如果想要引用拍好的照片,可以使用window.URL.createObjectURL()方法生成一个引用照片的URL并设置为图片的src:

如果浏览器不支持createObjectURL()方法,FileReader是可供选择的替代方案:

如果想要知道运行结果是什么样的,可以看下完整的Camera API示例。

示例代码如下:
HTML PAGE

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

最后编辑:
作者:Jianchihu
管理员——低调做事,低调做人

浅谈HTML5的Camera API》有 4 条评论

  1. 走起来 说:

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

  2. Pingback 引用通告: ヴィトン マルチ

  3. 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

留下一个回复

你的email不会被公开。

This site uses Akismet to reduce spam. Learn how your comment data is processed.