2

我正在尝试使用 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="" />
4

1 回答 1

0

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

如果您需要防止用户出现这种情况，您可能需要简单地添加一些代码，允许用户从您的应用程序更改上传图像的方向。

于 2013-11-10T18:12:57.933 回答