摄像头

 

概述

摄像头(Camera)API是通过input元素来实现的,其中该元素的type属性必须为“file”,accept属性要允许图片格式,这样才能指示该文件选择框允许选择图片,包括直接通过摄像头拍摄图片。

<input type="file" id="pic" accept="image/*">

当用户激活input元素时,系统会显示一个选择页面,其中一个选项是选择本地的图片文件,另外一个选项是通过摄像头直接拍摄图片作为选择的图片。

若用户选择摄像头,就进入设备(包括PC、手机、平板等)的拍照模式。拍照完成后,用户能够选择确认或放弃,如果确认,该图片会作为所选文件发送给<input type=“file”>元素,同时触发该元素的onchange事件。

代码示例

获取照片

通过File API,可获取到用户所拍摄的图片的引用。

  function takePicture(callback) {
    //获取文件选择框
    var filePhoter = document.getElementById("filePhoter ");
    filePhoter .onchange = function(e) {
      //获取图片文件的引用
      var files = e.target.files, file;
      if(files && files.length > 0) {
        file = files[0]
      }
      //调用回调函数
      callback(file);
    }
  }  

展示图片

获得了图片(也就是File对象)之后,我们就可以直接在前端将改图片显示到页面上。

使用URL.createObjectURL()方法

  function showPicture(picFile)
    //获取到img元素
    var imgEl= document.getElementById("pictureShower");

    // 获取到window.URL对象
    var URL = window.URL || window.webkitURL;

    // 创建一个对象URL字符串
    var imgURL = URL.createObjectURL(file);

    // 设置img元素的src属性为那个URL
    imgEl.src = imgURL;

    // 释放那个对象URL
    URL.revokeObjectURL(imgURL);
  }  

使用FileReader.readAsDataURL()方法

  function showPicture(picFile)
    //获取到img元素
    var imgEl= document.getElementById("pictureShower");

    var fileReader = new FileReader();
    fileReader.onload = function (event) {
       imgEl.src = event.target.result;
    };
    fileReader.readAsDataURL(file);
  }  

参考

相关页面

外部链接