怎么在HTML5中利用Canvas調(diào)用手機(jī)拍照功能

發(fā)布時(shí)間：2021-03-10 15:46:47 來(lái)源：億速云閱讀：208 作者：Leah 欄目：web開(kāi)發(fā)

本篇文章為大家展示了怎么在HTML5中利用Canvas調(diào)用手機(jī)拍照功能，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

<html> 
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<meta name="format-detection" content="telephone=yes"> 
<head> 
 <meta charset="UTF-8"> 
 <title>上傳證件</title> 
 <style> 
 body { 
  margin: 20px 20%; 
  color:#777; 
  text-align: center; 
 } 
 #result{ 
  margin-top: 20px; 
 } 
 </style> 
</head> 
<body> 
 <h2 class="text-center">上傳證件...</h2> 
 <hr/> 
 <input type="file"/> 
 <div id="result" align="center"></div> 
 <hr/> 
 
 <!-- 引入jQuery --> 
 <script type="text/javascript" src="../js/jQuery/jquery-1.9.1.min.js"></script> 
 <script type="text/javascript" src="../js/LocalResizeIMG.js"></script> 
 
 <!-- mobileBUGFix.js 兼容修復(fù)移動(dòng)設(shè)備 --> 
 <script src="../js/mobileBUGFix.mini.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
 $("input:file").localResizeIMG({ 
  width: 500, 
  quality: 0.8, 
  success: function (result) { 
  var img = new Image(); 
  img.src = result.base64; 
  console.log(result.clearBase64); 
  //$("body").append(img); 
  $("#result").empty(); 
  $("#result").append(img); //呈現(xiàn)圖像(拍照結(jié)果) 
  $.ajax({ 
   url: "upLoadImageServlet", 
   type: "POST", 
   data:{formFile:result.clearBase64}, 
   dataType: "HTML", 
   timeout: 1000, 
   error: function(){ 
   alert("Error loading PHP document"); 
   }, 
   success: function(result){ 
   //alert(result); 
   //console.log(result); 
   alert("Uploads success~") 
   } 
  }); 
  } 
 }); 
 </script> 
</body> 
</html>

上面實(shí)現(xiàn)的流程導(dǎo)致是這樣的，首先在前端把圖片進(jìn)行壓縮，因?yàn)槭謾C(jī)的不同，可能有的手機(jī)拍照給力，像素高，拍出來(lái)的圖片的大小就相對(duì)大一些，所以這里通過(guò)一個(gè)插件進(jìn)行了壓縮，然后轉(zhuǎn)換成為Base64的編碼，再把Base64的編碼使用AJAX來(lái)POST到服務(wù)器，然后在Java或者PHP后臺(tái)進(jìn)行Base64解碼，解出來(lái)的路徑即為上傳圖片的路徑地址，然后再進(jìn)行存儲(chǔ)，寫到文件或者數(shù)據(jù)庫(kù)里面。

此外，這里需要說(shuō)明一個(gè)問(wèn)題：很多人都說(shuō)到了微信內(nèi)置瀏覽器，之前我也一直認(rèn)為微信內(nèi)置瀏覽器就是微信自己開(kāi)發(fā)的一套瀏覽器，然后對(duì)很多東西進(jìn)行了限制。其實(shí)不是這樣的，微信本身并沒(méi)有再重新開(kāi)發(fā)一套瀏覽器，而是調(diào)用的系統(tǒng)自身的瀏覽器，是根據(jù)手機(jī)的不同系統(tǒng)而變化的。微信內(nèi)置瀏覽器調(diào)用的是手機(jī)系統(tǒng)默認(rèn)瀏覽器，ios和Android系統(tǒng)默認(rèn)瀏覽器都是webkit內(nèi)核，只是對(duì)HTML5和CSS3的支持程度可能不同。因?yàn)闉g覽器只是系統(tǒng)的一部分，因此系統(tǒng)默認(rèn)瀏覽器不會(huì)單獨(dú)升級(jí)，對(duì)HTM5、CSS3的支持程度與系統(tǒng)版本有很大關(guān)系。安卓版微信直接調(diào)用系統(tǒng)瀏覽器內(nèi)核, iOS則是調(diào)用safari,大家可以看到下面1和3的效果是一模一樣的，1是微信瀏覽器打開(kāi)的，3則是魅族MX 3自帶的系統(tǒng)瀏覽器打開(kāi)的效果。

上面我的我都測(cè)試過(guò)了，可以正常運(yùn)行。下面附上幾張照片：

1、這是在微信里面打開(kāi)的效果

怎么在HTML5中利用Canvas調(diào)用手機(jī)拍照功能