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

2013年10月12日 4comments 4720hotness 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
snail Published at 4 hours ago(03 03202633105 27 27pm26) 多谢,大佬。醍醐灌顶!
Bramsnawl Published at 11 hours ago(03 03202633110 27 27am26) Proper blood collection playing cards are measure ...
NasibDepdrotte Published at 24 hours ago(03 03202633110 26 26pm26) Inf ect isC linNo rth A m viiiix, Sm ets o urgo is...
Pereplanirovka kvartir_cvsr Published at 2 days ago(03 03202633105 25 25pm26) перепланировка услуги [url=https://pereplanirovka-...
Mirzoemele Published at 3 months ago(01 01202613104 06 06pm26) Double blind randomised controlled trial of two to...
Ad

COPYRIGHT © 2026 jianchihu.net. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang