ASP.Net/Javascript の Web サイト用にかなり複雑な画像アップロード機能を開発しています。画像プレビューを中心とした WYSIWYG インターフェイス ベースで、ユーザーがアップロードする前にすべてクライアント側で実行されます。しかし、私は根本的な障害にぶつかりました。ユーザーが画像を変換し始める前に、ユーザーが何を見ているのか本当にわかりません。
プレビュー クライアント サイドを作成するための Javascript は、基本的にこの jQuery ビットです。
$('#inputPhotoUploader').change(function () {
var image = this.files[0];
var urlCreator = window.URL || window.webkitURL;
imageClientURL = urlCreator.createObjectURL(image);
var previewImage = document.createElement("img");
previewImage.src = imageClientURL;
$('#previewContainer').empty();
$('#previewContainer').append(previewImage);
});
これにより、ユーザーが実際に何もアップロードしなくても、#inputPhotoUploader で選択されたファイルに基づいて #previewContainer div に画像が作成されます。偉大な。
問題は、そのファイルに回転に関する Exif データが含まれていることが多いことです。ブラウザは、このデータに基づいてプレビュー画像を自動的に回転させる可能性があります (少なくとも、私の iPhone では回転します)。私がテストしたすべてのデスクトップ ブラウザのように、そうではないかもしれません。
最終的にユーザーがアップロードを押すと、元のファイル、Exif データなどすべてが取得されます。しかし、それがユーザーにどのように表示されたかはわかりません。おそらく彼らのブラウザはExifデータを無視し、「間違った」回転で画像を表示しましたが、ユーザーはそれを正確にそのように見せたいと思っており、それが私のソフトウェアがそれを表示する方法です. あるいは、iPhone で簡単に撮影したものを Safari で自動回転させたのかもしれません。ユーザーは、プレビューで表示されたので、他の人にはそのように表示されることを期待しているのかもしれません。
プレビューが作成された後、私はいくつかの他の派手な画像変換を行いますが、この基本的な問題はまだ残っています.ブラウザは何を表示しましたか? 今のところ、ブラウザがプレビューを自動的に回転させているかどうかを判断するか、何らかの方法でブラウザが回転していないことを確認する必要があります。そして、私は醜いユーザーエージェントを使って前者を行う方法しか思いつきません。
より良い方法はありますか？