HTML5调用手机摄像机、相册功能 :<input>的使用方法及js获取图片

    <!-- 调取相机 -->
    <input type="file" id="camera" capture="camera" accept="image/*">
    <!-- 调取摄像 -->
    <input type="file" id="" capture="camcorder" accept="video/*">
    <!-- 调取录音 -->
    <input type="file" id="" capture="microphone" accept="audio/*">
    <div id="imgs"></div>

accept表示打开的系统文件目录

capture表示的是系统所捕获的默认设备，camera：照相机；camcorder：摄像机；microphone：录音； 其中还有一个属性multiple，支持多选，当支持多选时，multiple优先级高于capture

1.拍摄单张图片

上代码:

       <input type="file" id="camera" capture="camera" accept="image/*">
       <div id="imgs"></div>
       
       var camera = document.querySelector("#camera");
       var imgs = document.querySelector("#imgs");
       camera.onchange = function () {
           readURL(this);
       }
       function readURL(input) {
           if (input.files && input.files[0]) {
               var reader = new FileReader();
               reader.onload = function (e) {
                   var img = new Image();
                   img.src= e.target.result;
                   imgs.appendChild(img);
               }
               // readAsDataURL(file):读取文件并将文件以数据URI的形式保存在FileReader的result属性中
               reader.readAsDataURL(input.files[0]);
           }
       }
       
       
2.选择多张图片

   上代码:
   
   <input type="file" id="camera" multiple>
   <div id="imgs"></div>
   
   var camera = document.querySelector("#camera");
       var imgs = document.querySelector("#imgs");
       var count = 0;
       camera.onchange = function () {
           readURL(this);
       }
       function readURL(input) {
           var reader = new FileReader();
           reader.onload = function (e) {
               var img = new Image();
               img.src = e.target.result;
               imgs.appendChild(img);
               count += 1;
               if (count < input.files.length) {
                   readURL(input);//递归调用
               }

           }
           reader.readAsDataURL(input.files[count]);
       }