Question

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

Answer 1

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

如果您需要为用户阻止此方案，您可能只想添加一些代码，以允许用户从您的应用更改上传图片的方向。

HTML5 FileReader api纵向方向问题

1 个答案: