调取手机摄像头拍照并获取拍得的照片
Posted ColaMan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了调取手机摄像头拍照并获取拍得的照片相关的知识，希望对你有一定的参考价值。
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>
以上是关于调取手机摄像头拍照并获取拍得的照片的主要内容，如果未能解决你的问题，请参考以下文章
怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片