JCHub

  • Home
  • Category
    • A/V
    • WebRTC
    • Beauty of Programming
    • Linux
    • Windows
    • Moments of Life
    • Campus Life
  • Reference
    • API Reference
    • Utilities
    • AV Test
    • Doc
  • Message Board
  • About
html5
Beauty of Programming

浅谈HTML5的Camera API

Camera API能够调用设备的摄像头拍照并上传到当前网页。使用input标签,设置type="file",accept属性设置为能接收图像,就能够实现前面的要求了。 HTML代码如下: [crayon-69d8da38960a4808470506/] 当使用者选择激活这个HTML元素时,它们就会以选择某个文件的选项形式呈现出来,设备摄像头就是其中一个选项。如果用户选择了摄像头选项,就进入了拍照模式。拍完照后,用户要在弹出的选项里选择接受或放弃。如果选择接受的话,将会跳到 [crayon-69d8da38960af808133176/] 标签,onchange事件被激发。 在File API的帮助下我们能够访问拍完的照片或者被选中的文件: [crayon-69d8da38960b3900324468/] 如果想要引用拍好的照片,可以使用window.URL.createObjectURL()方法生成一个引用照片的URL并设置为图片的src: [crayon-69d8da38960b6972666012/] 如果浏览器不支持createObjectURL()方法,FileReader是可供选择的替代方案: [crayon-69d8da38960b9813484541/] 如果想要知道运行结果是什么样的,可以看下完整的Camera API示例。 示例代码如下: HTML PAGE [crayon-69d8da38960bd631493776/] 测试页面:camera API 详细代码地址:https://github.com/robnyman/robnyman.github.com/tree/master/camera-api

2013年10月12日 4comments 4750hotness 0likes Jeff Read all
Copyright Statement

Unauthorized reproduction or plagiarism in any form is strictly prohibited. For reprint requests, please contact via email.

Recent Comments
Addiea9 Published at 3 days ago(04 04202643001 08 08am26) Some called it luck. Then Sarah cashed 800K. Be ne...
snail Published at 2 weeks ago(03 03202633105 27 27pm26) 多谢,大佬。醍醐灌顶!
dongxuh Published at 9 months ago(07 07202573103 27 27pm25) 真心不错的博客,有机会能一起分享
南南 Published at 9 months ago(07 07202573103 15 15pm25) 写的超棒!
Jeff Published at 11 months ago(05 05202553105 15 15pm25) 2025-03-12的提交已经支持了
Ad

COPYRIGHT © 2026 jianchihu.net. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang