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

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

怪我咯

May 17, 2018 pm 01:54 PM

canvashtml5写真をアップロードする携帯電話で写真を撮る

この記事では主に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 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 エンコードが 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 で開いたときの効果です

2. これはモバイル UC ブラウザで開いたときの効果です:

3. これはシステム独自のブラウザで開いた場合の効果です (追記: 私の携帯電話は Meizu MX 3)。これはシステムギャラリーディレクトリを開きませんが、システムのフォルダールートディレクトリを直接見つけます。。

次の記事では、Java バックグラウンドでの画像アップロード操作について説明します。

HTML5+Canvas は、携帯電話のカメラ機能を呼び出して画像アップロード機能を実装します (詳細な画像とテキストは次の記事で説明します) )

以上がHTML5+Canvasは携帯電話のカメラ機能を呼び出して画像アップロード機能を実装します（前半部分の詳細な画像とテキスト）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5コード：Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5：Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1）HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2）CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3）JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 中国語版

中国語版、とても使いやすい

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。