HTML5+Canvasは携帯電話のカメラ機能を呼び出して画像アップロード機能を実装します（前半部分の詳細な画像とテキスト）-H5 チュートリアル-php.cn

HTML5+Canvasは携帯電話のカメラ機能を呼び出して画像アップロード機能を実装します（前半部分の詳細な画像とテキスト）

怪我咯

リリース： 2018-05-17 13:54:44

オリジナル

9461 人が閲覧しました

この記事では主にHTML5+Canvasとjquery技術を詳しく紹介しており、携帯電話のカメラ機能を呼び出して写真をアップロードします。興味のある友人はそれを参照してください

最近私を使用しているため。は WeChat プロジェクトに取り組んでいましたが、これには証明書のアップロード機能が含まれていました。最初はまったくわかりませんでした。ネットで多くの情報を調べ、QQ グループの多くの人に尋ねました。その後、システムの権限を申請できますが、WeChat はブラウザーで動作し、カスタマイズされたページも WeChat の組み込みブラウザーを通じて開かれ、WeChat ブラウザーは内部で多くの特別な処理を実行し、ブロックします。したがって、ページ上でカメラ機能を呼び出すことも、携帯電話システムのギャラリーディレクトリを開くこともできません。もちろん、これらは単なる理論上の推測にすぎません。2 日間情報を確認した結果、この問題が発生したことがわかりました。解決することができ、実装プロセスは実際には非常に簡単です。 HTML5のファイルアップロード機能を利用し、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 class="text-center">上传证件...</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 エンコードが AJAX を使用してサーバーに POST され、Base64 デコードが実行されます。 Java または PHP バックグラウンドでは、解決されたパスが画像をアップロードするためのパスとして保存され、ファイルまたはデータベースに書き込まれます。

さらに、ここで説明する必要がある問題があります。多くの人が WeChat の組み込みブラウザについて話しています。以前、私は WeChat の組み込みブラウザは WeChat 自体によって開発された一連のブラウザであると常に考えていました。それから多くのことを制限しました。実際、これは事実ではありません。WeChat 自体は新しいブラウザセットを開発していません。しかし、WeChat がシステムと呼ぶブラウザ自体は、携帯電話のさまざまなシステムに応じて変わります。 WeChat の組み込みブラウザは、携帯電話システムのデフォルトのブラウザを呼び出します。iOS と Android システムのデフォルトのブラウザはどちらも Webkit カーネルですが、HTML5 と CSS3 のサポートの程度が異なる場合があります。ブラウザはシステムの一部にすぎないため、システムのデフォルトのブラウザは個別にアップグレードされません。HTM5 および CSS3 のサポートの程度はシステムのバージョンと大きく関係します。 Android バージョンの WeChat はシステムブラウザカーネルを直接呼び出しますが、iOS バージョンは Safari を呼び出します。以下の 1 と 3 の効果はまったく同じであり、3 は WeChat ブラウザによって開かれるシステムブラウザであることがわかります。 Meizu MX 3 が付属しています。オープンエフェクト。

上記すべてをテストしましたが、正常に実行できます。以下にいくつかの写真を添付します:

1. これは WeChat で開いたときの効果です