调取手机摄像头拍照并获取拍得的照片

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8">
 6         <title>HTML5 调用手机摄像头</title>
 7         <style type="text/css">
 8             .addBorder {
 9                 border: 1px solid #ccc;
10             }
11             #imgDiv {
12                 width: 300px;
13                 height: 300px;
14             }
15             
16             #imgContent {
17                 width: 100%;
18                 height: 100%;
19             }
20         </style>
21     </head>
22 
23     <body>
24 
25         <button class="btn" style="height: 200px;width: 200px;background-color: red;">按钮</button>
26         <form id="imgForm">
27             <input class="addBorder" accept="image/*" type="file" style="display: none;">
28             <br/>
29         </form>
30         <button style="height: 100px;width: 100px;background-color: green;" onclick="loadImg()">获取图片</button>
31         <div id="imgDiv">
32             <img id="imgContent">
33         </div>
34         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
35         <script type="text/javascript">
36             
37             function loadImg() {
38                 //获取文件  
39                 var file = $("#imgForm").find("input")[0].files[0];
40 
41                 //创建读取文件的对象  
42                 var reader = new FileReader();
43 
44                 //创建文件读取相关的变量  
45                 var imgFile;
46 
47                 //为文件读取成功设置事件  
48                 reader.onload = function(e) {
49                     alert(\'文件读取完成\');
50                     imgFile = e.target.result;
51                     console.log(imgFile);
52                     $("#imgContent").attr(\'src\', imgFile);
53                 };
54 
55                 //正式读取文件  
56                 reader.readAsDataURL(file);
57             }
58             $(\'.btn\').click(function() {
59                 $(\'.addBorder\').click();
60             })
61         </script>
62     </body>
63 
64 </html>
发表于 2017-05-11 15:03 ColaMan 阅读(3042) 评论(0) 编辑收藏举报