HTML5 FileReader API を使用して、ユーザーのコンピューターから画像を表示しようとしています。ここにフィドルがあります:http://jsfiddle.net/xEzcZ/。
問題は、縦向きの画像をアップロードしようとすると、画像を IMG タグに配置すると「反転」することです。Mac のプレビューで同じ画像を開くと、正しく開きます。FileReader も使用してその画像を正しい向きで表示できる方法はありますか?
//js
$(function(){
$('input').on('change', function(e){
var reader = new FileReader();
reader.onload = function(e){
$('img').attr('src', e.target.result);
};
reader.readAsDataURL(e.target.files[0]);
});
});
//html
<input type="file" name="photo" />
<img class="photo" src="" />