HTML5+Canvas如何調(diào)用手機拍照功能實現(xiàn)圖片上傳

小編給大家分享一下HTML5+Canvas如何調(diào)用手機拍照功能實現(xiàn)圖片上傳，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司，為您提供網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設(shè)計，對服務(wù)封陽臺等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗。成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報價服務(wù),我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進步，是我們永遠的責任！

因為最近一段時間，一直在弄微信項目，其中涉及到了證件上傳的功能，剛開始的時候一點頭緒都沒有，上網(wǎng)查了很多資料，QQ群里面也問了不少人，很多人說如果是app程序，可以申請系統(tǒng)權(quán)限，然后再去調(diào)用系統(tǒng)底層的東西，但是微信是在瀏覽器里面操作的，我們自定義的頁面也是通過微信內(nèi)置瀏覽器打開的，而且微信瀏覽器在內(nèi)部進行了很多特殊處理，屏蔽了很多東西，所以要在頁面調(diào)用拍照功能或者是打開手機系統(tǒng)的圖庫目錄是不可能的，當然，這些都只是大伙兒理論上的猜測而已，而在我查了兩天的資料之后，發(fā)現(xiàn)這個問題原來是可以解決的，而且實現(xiàn)的過程居然也很簡單。只是用到了HTML5的file文件上傳功能，再配合canvas即可。下面附上源代碼：

<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"/> 
 <p id="result" align="center"></p> 
 <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 兼容修復移動設(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>

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

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

上面我的我都測試過了，可以正常運行。下面附上幾張照片：

1、這是在微信里面打開的效果

HTML5+Canvas如何調(diào)用手機拍照功能實現(xiàn)圖片上傳HTML5+Canvas如何調(diào)用手機拍照功能實現(xiàn)圖片上傳

2、這是在手機UC瀏覽器打開的效果：

HTML5+Canvas如何調(diào)用手機拍照功能實現(xiàn)圖片上傳

HTML5+Canvas如何調(diào)用手機拍照功能實現(xiàn)圖片上傳

3、這個是在系統(tǒng)自帶瀏覽器里面打開的效果（ps:我的手機是魅族MX 3），但是這個不是打開系統(tǒng)圖庫目錄，而是直接定位到了系統(tǒng)的文件夾根目錄。

HTML5+Canvas如何調(diào)用手機拍照功能實現(xiàn)圖片上傳HTML5+Canvas如何調(diào)用手機拍照功能實現(xiàn)圖片上傳

以上是HTML5+Canvas如何調(diào)用手機拍照功能實現(xiàn)圖片上傳的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：HTML5+Canvas如何調(diào)用手機拍照功能實現(xiàn)圖片上傳
文章起源：http://muchs.cn/article2/jojeoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、定制開發(fā)、網(wǎng)頁設(shè)計公司、App設(shè)計、關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)