i saw many posts on viewing an image before uploading. one post had a very supposed to be easy method to implement using 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);
});
but the problem is that the image is loaded rotated! so is there a missing property that i'm missing ? or maybe FileReader is not mature enough to understand the layout of an image. no idea!
maybe I should work with a different method !? any ideas regarding the issue would be greatly appreciated.
thanks
I know its late to answer this question but here is an answer
HTML Code
<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 Code
$('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/
This is not my code ,found it on given fiddle when searching for the same problem.
It is due to the Orientation meta attribute on picture's EXIF information as suggested in this post.
image auto rotates while reading url from file upload (when it's a big image)?
Orientation values are suggested here
Accessing JPEG EXIF rotation data in JavaScript on the client side
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With