在使用 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 上传之前预览图像,旋转图像的主要内容,如果未能解决你的问题,请参考以下文章