exfe.js と Canvas を使用して、写真を撮ってモバイル IOS にアップロードするときに写真が反転する問題を解決します (コード付き)

この記事の内容は、exfe.js と Canvas を使用して、モバイル IOS での写真の反転とアップロードの問題を解決することに関するもので、困っている友人が参考になれば幸いです。あなたへ。 。

私がフロントエンドの仕事を始めてから 1 年ほど経った頃だったと記憶しています。当時、私はこのプロジェクトを担当していませんでした。テストで、Apple ユーザーが写真を撮ってアバターをアップロードすると、アバターが反転してしまうことがわかりました。その時、クラスメートは午後中ずっと問題を解決するのに費やしましたが、問題は私に転送され、半分は私に解決されました。退社まであと 1 時間、私もその時は混乱していましたが、最初に頭に浮かんだのは、反転したかどうかをどうやって判断すればいいのか、ということでした。 Androidでは問題ありませんが、Apple携帯電話のアルバム内の一部の写真は問題ありません。jsにこの機能を判定させることはできますか？ネットで情報を調べてみたら、確かにありました！それが exfe.js で、勉強を続けていたこの頃には、すでにチームリーダーのお姉さんもお見舞いに来ていて、夕方9時頃になってしまいました。解決しました。

2年後、私は昨日再びこの問題に遭遇しました。私は1年半前に勤めていた会社を辞めました。今の会社では、写真をアップロードしたり、幽霊の顔を合成したりするイベントを行っています。 2 日前にそれをプロジェクト マネージャーに送信しました (私たちはここでは遠隔地におり、数人の開発者がいます)。私が夕方仕事を終えようとしていたとき、プロジェクト マネージャーは「iOS イメージを反転してください」というメッセージを送りました。 「修正してください。今夜はオンラインにしなければならないので、残業するつもりです。」私は心配していました。草と泥の馬が駆け抜けていきました。第一に、iOS にこの問題があることを忘れていました。第二に、この問題は 2 日間送信されていました。 . 仕事を辞めようとしたときに、問題が発生したので残業しなければならないと言いました。夜の予定をキャンセルしなければなりません！まだ無料です！慰めの食事もなかったし、謝罪もなかったので、それでも残業するつもりで「分かった、今度は事前に試してみるよ」と苦笑いしながら答えた。 、と思ったらもっと早く対応して7時過ぎには終わりました。その後に展開上の問題が発生しても、それはもう私の問題ではありません。またもうすぐ 9 時です。

ほぼ同じような光景で、ただため息をつくだけです。

コード

html部分

<input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" />
<img alt="preview" src="" id="myImage"/>

exfe.jsをアップロードして画像情報を読み取ります。アップロードした画像には多くの情報が含まれています。 #Orientation 値は 1、3、6、8 などで、それぞれ 0°、180°、90°時計回り、90°反時計回りを表します。

Canvas を使用すると、最終的に必要な結果が得られます。これはインターネットからのコードの抜粋です。特別な関数がある場合は、自分でロジックを作成する必要があります。角度を決めてOSを判断してcanvasで再描画し、最後にdomを操作して画像を表示します。

UPコード

//获取照片方向角属性，用户旋转控制
EXIF.getData(file, function() {
    EXIF.getAllTags(this);
    Orientation = EXIF.getTag(this, 'Orientation');
    console.log(Orientation);
});

以上がexfe.js と Canvas を使用して、写真を撮ってモバイル IOS にアップロードするときに写真が反転する問題を解決します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。