介紹HTML5+Canvas呼叫手機拍照功能實現圖片上傳（上篇）-H5教程-PHP中文網

首頁

web前端

H5教程

介紹HTML5+Canvas呼叫手機拍照功能實現圖片上傳（上篇）

零下一度

Apr 25, 2017 am 10:43 AM

canvashtml5圖片上傳

這篇文章主要為大家詳細介紹了HTML5+Canvas，和jquery技術，調用手機拍照功能實現圖片上傳，具有一定的參考價值，感興趣的小伙伴們可以參考一下

因為最近一段時間，一直在弄微信項目，其中涉及到了證件上傳的功能，剛開始的時候一點頭緒都沒有，上網查了很多資料，QQ群裡面也問了不少人，很多人說如果是app程序，可以申請系統權限，然後再去調用系統底層的東西，但是微信是在瀏覽器裡面操作的，我們自定義的頁面也是通過微信內置瀏覽器打開的，而且微信瀏覽器在內部進行了很多特殊處理，封鎖了很多東西，所以要在頁面調用拍照功能或者是打開手機系統的圖庫目錄是不可能的，當然，這些都只是大夥兒理論上的猜測而已，而在我查了兩天的資料之後，發現這個問題原來是可以解決的，而且實現的過程居然也很簡單。只是用到了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> 
 <h1 id="上传证件">上传证件...</h1> 
 <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 兼容修复移动设备 --> 
 <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); //呈现图像(拍照結果) 
  $.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>

上面實現的流程導致是這樣的，首先在前端把圖片進行壓縮，因為手機的不同，可能有的手機拍照給力，像素高，拍出來的圖片的大小就相對大一些，所以這裡透過一個插件進行了壓縮，然後轉換成為Base64的編碼，再把Base64的編碼使用AJAX來POST到伺服器，然後在Java或PHP後台進行Base64解碼，解出來的路徑即為上傳圖片的路徑地址，然後再進行存儲，寫到文件或資料庫裡面。

此外，這裡需要說明一個問題：很多人都說到了微信內建瀏覽器，之前我也一直認為微信內建瀏覽器就是微信自己開發的一套瀏覽器，然後對很多東西進行了限制。其實不是這樣的，微信本身並沒有再重新開發一套瀏覽器，而是調用的系統本身的瀏覽器，是根據手機的不同系統而變化的。微信內建瀏覽器呼叫的是手機系統預設瀏覽器，ios和Android系統預設瀏覽器都是webkit內核，只是對HTML5和CSS3的支援程度可能不同。因為瀏覽器只是系統的一部分，因此系統預設瀏覽器不會單獨升級，對HTM5、CSS3的支援程度與系統版本有很大關係。安卓版微信直接呼叫系統瀏覽器核心, iOS則是呼叫safari,大家可以看到下面1和3的效果是一模一樣的，1是微信瀏覽器打開的，3則是魅族MX 3自帶的系統瀏覽器打開的效果。

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

1、這是在微信裡面開啟的效果

# 2.這是在手機UC瀏覽器開啟的效果：

###3、這個是在系統自備瀏覽器裡面開啟的效果（ps:我的手機是魅族MX 3），但這個不是開啟系統圖庫目錄，而是直接定位到了系統的資料夾根目錄。 #####################下一篇會講到在Java後台進行圖片上傳操作：#########介紹HTML5+Canvas呼叫手機拍照功能實現圖片上傳（下篇）######需要學習h5的同學請關注php中文網###h5影片教學###，眾多h5線上影片教學可以免費觀看！ ###

以上是介紹HTML5+Canvas呼叫手機拍照功能實現圖片上傳（上篇）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進：1.語義化標籤提升了代碼清晰度和SEO效果；2.多媒體支持簡化了視頻和音頻嵌入；3.表單增強簡化了驗證；4.離線與本地存儲提高了用戶體驗；5.畫布與圖形功能增強了網頁的可視化效果。

HTML5：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。

See all articles