これは私が会社のために最近書いたプロジェクトです。プロジェクトの要件は大まかに次のとおりです。
1.ローカル画像を携帯電話にアップロードし、トリミングする(要件は後で追加します)2.トリミング用に画像を回転します (後で要件を追加します)
3. さまざまなテキストを入力し、色を選択して、トリミングした画像にテキストと関連する 2 つの画像を透かし入れ、サーバーにアップロードして画像アドレスを生成し、それを返して共有します。 。
リソース、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 でも使用されていますが、これについては後で説明します。
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/>
以上がHTML5 でローカル画像をアップロードする際のさまざまな問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。