摄像头

摄像头(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);
  }  

相关页面

外部链接

• 使用Camera API-MDN