H5はカメラに電話をかけて写真を撮り、写真のサンプルコードを圧縮します

ドキュメントを整理し、H5のインスタンスコードを検索してカメラに電話して写真を撮り、写真を圧縮し、整理して合理化します。

最近、H5ページを作成して、カメラを呼び出して写真を撮影し、写真をBase64にバックグラウンドサーバーに圧縮し、サーバーが識別結果を返します。

フロントエンドの主な関数ポイントは次のとおりです。

1. カメラを呼び出す方法
2. 写真を圧縮する方法
3. 写真からbase64

カメラを呼び出す最も簡単な方法は、入力ファイル[カメラ]プロパティを使用することです。

 <入力タイプ=ファイルキャプチャ= carera accept = image/*> // camera <入力タイプ=ファイルcomppot = image/*> //アルバム

このメソッドの互換性は、iPhone携帯電話で通常カメラを開くことができますが、Android携帯電話をクリックした後、カメラ、ギャラリー、ファイルマネージャーなどの選択アイテムがあります。インターネットで多くの優れたソリューションを検索しましたが、書き留め続けることしかできませんでした。エッセンスエッセンス

画像圧縮は、 FileReaderと<canvas>を使用するために使用されます。

FileReaderオブジェクトを使用すると、Webアプリケーションがコンピューターに保存されているファイルのコンテンツを非同期に読み取り、ファイルまたはBLOBオブジェクトを使用して、読み取りたいファイルまたはデータを指定できます。

<canvas>は、スクリプトを使用してグラフィックを描画できるHTML要素であり、グラフィックとシンプルなアニメーションを描画できます。

画像の圧縮は、画像の解像度と品質を圧縮する必要があります。写真の。

 var max_wh = 800; var image（）;画像.height = max_wh;} if（width> max_wh） / dataurl filerereaderを通じて取得

次に、写真を圧縮する品質が80％です。 <canvas>タグを動的に作成してから、画像を圧縮します。

 var Quality = document.createlement（canvas '）; 、0、image.width、height）;

次に、サーバーにアップロードしてサーバーを表示した結果ですが、物事はそれほどスムーズではありません。エッセンスエッセンスiOS携帯電話が圧縮された後、写真は不可解に回転し、問題を解決し続けます。

最初にexif.jsを引用し、exif.getDataおよびexif.gettgを介して写真の指示情報を取得します。

 // file exif.getData（file、function（）{orientation = exif.gettg（file、 'orientation'）;}）;

各オリエンテーション値の意味は、iPhoneの携帯電話に対応して写真を撮ります。

スイッチ（オリエンテーション）{ケース8：cvs.head = width;} var context;この時点で、左のホームキーは、左側のコンテキスト（幅、高さ）を回転させます。通常、携帯電話の方向）。 8：// 90度のコンテキストを時計回りに回転させる（-0.5 * math.pi）;

次に、写真をアップロードして、iOSの下の画像が正常であることがわかります。

完全なコードを以下に示します。

 $（ 'input [type = file]'）。 /i.test（file.type）{exif.getData（file、function（）{exif.gettag（file、 'orientation'）;}）; max_wh = 800; var image（）; ; image.head = max_wh;} if（image.width> max_wh）{// widthed *= height *= max_wh / image.width; 80; document.createlement（canvas '）; .height = width;} var context = cvs.getContext（2d）;左に接続されている180度（幅、高さ）。電話。反時計回りのコンテキスト（-0.5 * math.pi）; Image/jpeg '、question // ）}}）;

上記は、この記事のすべての内容です。