在使用 FileReader 上传之前预览图像,旋转图像

Posted

技术标签:

【中文标题】在使用 FileReader 上传之前预览图像,旋转图像【英文标题】:preview an image before uploading using FileReader, rotates the image 【发布时间】:2013-10-05 00:27:32 【问题描述】:

我在上传之前看到了很多关于查看图像的帖子。 一篇文章有​​一个非常容易使用 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 不够成熟,无法理解布局 的图像。不知道!

也许我应该使用不同的方法!? 任何有关该问题的想法将不胜感激。

谢谢

【问题讨论】:

您必须解析图像标题中的 exif 数据,检查 Orientation 标签,并进行相应的旋转。 我遇到了同样的问题。我的预览实现在 Vue.js 中并且运行良好。我注意到,如果图像较小,它会保持方向,但如果图像较大(如 3-4MB)它会旋转,所以上传的图像也会旋转。不知道为什么会这样。 【参考方案1】:

我知道回答这个问题已经很晚了,但这里有一个答案

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;
    
    elsed = +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/

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

【讨论】:

【参考方案2】:

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

image auto rotates while reading url from file upload (when it's a big image)?

此处建议使用方向值

Accessing JPEG EXIF rotation data in JavaScript on the client side

【讨论】:

以上是关于在使用 FileReader 上传之前预览图像,旋转图像的主要内容,如果未能解决你的问题,请参考以下文章

通过HTML5 FileReader实现上传图片预览功能

图像上传部分中的跨浏览器图像预览在 ie8 中不起作用

在上传之前预览图像

js的FileReader实现图片文件上传预览

js上传图片&预览(filereader)

Slider FileReader JS 多张图片上传(递增索引)