HTML5 でローカル画像をアップロードする際のさまざまな問題

これは私が会社のために最近書いたプロジェクトです。プロジェクトの要件は大まかに次のとおりです。
1.ローカル画像を携帯電話にアップロードし、トリミングする(要件は後で追加します)2.トリミング用に画像を回転します (後で要件を追加します)
3. さまざまなテキストを入力し、色を選択して、トリミングした画像にテキストと関連する 2 つの画像を透かし入れ、サーバーにアップロードして画像アドレスを生成し、それを返して共有します。 。

機能は大まかに上記のとおりで、その他の細かい機能については触れません。Vue の使用全体 (ルーター、

リソース、Webpack など) について説明します。 これらの要件 方法:

1. ローカルにアップロードし、

html5
の File Api を使用して画像の Base64 エンコーディングを取得し、それを img の src (ピット 1、2) に割り当てます。次に、レイヤーをポップアップし、トリミングし、最後にトリミングを開始するには、画像の上に p を配置して座標を計算します。計算が完了したら、canvas を使用して画像をインターセプトし、値 (ピット 3) を取得します。 ）。 2. この機能は、キャンバスの回転画像を使用して解決されます。回転時にアスペクト比を維持する必要があり、幅と高さに注意する必要があります (ピット 4)。 3. キャンバスを使用して透かしや画像を重ねます。重要なのは、座標に注意することです。

落とし穴について話しましょう: 1. src の Base64 エンコーディングを取得することは問題がないように見えますが、実際には大きな問題があります。携帯電話では多くの画像が縦に表示されますが、取得した Base64 エンコーディングが直接割り当てられます。 to imgのsrcを確認したところ、横向きになっていました。この状況を最初に発見したとき、私はこれが孤立した現象だと思っていましたが、繰り返し試した結果、特に iPhone の携帯電話では、選択した画像フォルダーも同じ画像に分割されることがわかりました。フォトアルバムとフォトストリーム、そして横画面、縦画面。なぜだか理解できません。 ? ?基本的に午後はこの問題に費やされました。

夕方戻ってきて、IOS開発の達人である私の友人である@叶古城に尋ねるまで、彼はiPhoneのカメラが水平になったので、携帯電話が垂直画面を表示する理由を教えてくれました。 iOS 自体が処理を行っており、それに応じて画像を使用できるということです。撮影角度の値は水平方向と垂直方向の問題を決定するために使用されますが、この値は実際には Web 側では利用できません。これは非常に恥ずかしいことです。では、この問題をどうやって解決すればいいのでしょうか？ ? ------- 私が使用する解決策: 画像を回転すると、ユーザーは積極的に画像を回転して角度を選択できるようになります。 別の解決策があり、これはピット 2 でも使用されていますが、これについては後で説明します。

2. この横画面に加えて、一部の

android

携帯電話で写真を選択した後、応答がなかったのは、html5のファイルAPIがサポートされていないためであると最初は考えました。後でいろいろなデバッガーで調べたところ、

Inputタグのchangeイベントがトリガーされていないことが原因で、この問題を解決するにはとにかくそれをトリガーする方法がなかったことがわかりました。さまざまな公式ドキュメントとスタックオーバーフローを確認すると、type="file" の入力により、携帯電話からアップロードされた写真を表す 2 つの 属性 が追加されます。

 <input type="file" name="image" class="file-choose" id="file" accept="image/*" v-on:change="chooseFileChange($event)" capture/>

このように受け入れとキャプチャを追加した後、問題の Android スマートフォンでは、写真を選択するときにいくつかのフォルダーを選択できます。慎重にテストした結果、アップロードできる写真もあれば、アップロードできないものもあります。ファイル データを取得するための root 権限がないため、カードを取得できず、変更イベントもトリガーされません。これも解決できない問題です。Web がブラウザ内にあり、アクセス許可が低いためです (Web アクセス許可の問題について文句を言わなければなりません、くそー)。この問題を解決するにはどうすればよいでしょうか。 ? ? バイパス、つまり、ページが会社独自のアプリにネストされている場合は、アプリに手伝ってもらいます。その後、プロジェクトは WeChat によって拡散され、WeChat ブラウザー内に存在する必要があるため、WeChat の JSSDK オプション ImageInterface を呼び出すことができます。 、これらの権限をバイパスすることができ、もう 1 つの利点は、ピット 1 の問題を解決することです。水平画面の問題に対処します。つまり、垂直画面をアップロードするときに、実際の水平画面は垂直画面として処理されます。ただし、コストは小さくありません。画像を選択し、

キーを取得してから、SDK を呼び出して WeChat サーバーに送信し、サーバー ID を取得して、この ID をサーバーに渡す必要があります。この ID を使用して、WeChat が画像を独自のサーバーにダウンロードし、URL を返すことができます。このプロセスは非常に複雑で、ダウンロード数には制限があります (WeChat で読み込み制限を申請できます)。

参考: WeChat js SDK の画像インターフェイス

3. 上記の問題を解決した後、それらを切り抜きます。base64 を取得した後、それを次のように割り当てます。 img を作成し、この画像上でフレームを移動し、座標を計算してトリミングしました。PC 側ではまったく問題なく、非常に効率的でした。しかし、WeChat でテストしたところ、3 つの問題が見つかりました。くそー、モバイル版は罠です、1つの機能、3つの異なる質問）、最初の質問は、携帯電話のピクセル数が高く、アップロード後の写真が小さくないことを誰もが知っているということです。 img の src は実際にはメモリ内にあるため、WeChat 全体が簡単にクラッシュします (クラッシュした、彼がクラッシュした、WeChat がクラッシュした --- 3 回)。2 番目の問題は、Vue の on を使用してタッチ イベントをバインドすることです。は非常に遅く、動きがまったくスムーズではなく、クラッシュすることもあります。いや、間違いなく、またクラッシュします。 3番目の問題は、回転のためにcanvas変換を使用する必要があることです。変換が完了した後、最初に画像データに値を割り当てる必要があり、これが非常に面倒です。

解決策: キャンバスを均一に使用し、もう img を使用しないでください。トリミングが完了するまで、img の Base64 を取得するだけです。エクスポートするときは、png の代わりに jpeg を使用します。画質は多少低下しますが、影響はないと思います。画像のトリミングと回転はすべてキャンバスであり、イベントをネイティブに直接バインドすることをお勧めします。

4. 回転の問題点は、元の画像のデータを保存してから、キャンバス自体を回転させる必要があることです。うまくいかないようです (おそらく私は数学が苦手です!!! 知っている人はデモしてください)。

以上がHTML5 でローカル画像をアップロードする際のさまざまな問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。