8

在上传之前，我看到了很多关于查看图像的帖子。一篇文章有​​一个非常容易使用 FileReader 实现的方法：

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#preview_image').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}
}  

$("#image_input").change(function(){
    readURL(this);
});

但问题是图像加载旋转！那么是否有我遗漏的财产？或者可能 FileReader 不够成熟，无法理解图像的布局。不知道！

也许我应该使用不同的方法！？关于这个问题的任何想法将不胜感激。

谢谢

4

2 回答 2

5

我知道回答这个问题已经很晚了，但这是一个答案

HTML 代码

<form method="POST" enctype="multipart/form-data">
    <input type="file" id="file">
    <div id="preview"></div>
    <br>
    <a href="#" id="counter"><- counter</a>
        <select id="degree">
            <option>90</option>
            <option>45</option>
        </select>
    <a href="#" id="clockwise">clockwise -></a>
    <hr>
    <button type="submit">save image</button>
</form>

Javascript代码

$('a').click(function(){
    var a = $('img').getRotateAngle();
    var d = Math.abs($('#degree').val());

    if($(this).attr('id') == 'counter'){
       //d = -Math.abs(+a - +d);
        d = a - d;
    }
    else{d = +a + +d;}

    $('img').rotate({animateTo:d});
});

/* image preview */
$('#file').change(function(){
    var oFReader = new FileReader();
    oFReader.readAsDataURL(this.files[0]);
    console.log(this.files[0]);
    oFReader.onload = function (oFREvent) {
        $('#preview').html('<img src="'+oFREvent.target.result+'">');
    };
});

CSS

#preview img {
    max-height: 300px;
    max-width: 300px;
}

http://jsfiddle.net/AxRJh/

这不是我的代码，在搜索相同问题时在给定的小提琴上找到它。

于 2014-01-30T10:05:30.747 回答
1

这是由于本文建议的图片 EXIF 信息的方向元属性。

从文件上传读取网址时图像自动旋转（当它是大图像时）？

此处建议的方向值

在客户端的 JavaScript 中访问 JPEG EXIF 旋转数据

于 2017-11-10T21:05:31.353 回答