HTML5 FileReader api 纵向问题

Question

我正在尝试使用 HTML5 FileReader api 显示来自用户计算机的图像。这是一个 fiddle :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="" />

Answer 1

问题是原始图像的方向是错误的，但你的 Mac 会自动修复它，而你这里的最小 javaScript 代码无法做到这一点。对于这一张图片，您可以修复它，但它有点复杂 - 这是一篇文章: http://www.brianculler.com/golbhet/2009/05/26/portrait-image-orientation-in-mac-os-x-and-how-to-fix-it/

如果您需要为用户防止这种情况，您可能只想添加一些代码，允许用户从您的应用更改上传图像的方向。