浅谈HTML5的Camera API

通过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" ;                          }                      }                  }              }          } ;      } } ) ( ) ;

延伸阅读

---

▶ Walkthrough007