Iphone Photo Upload EXIF roate not working - javascript

I have the following code which does a great job in taking user selected image and displaying as preview. However, images uploaded on devices running IOS have the rotation problem - they are rotated on preview. I understand that I need to access the EXIF data of the image to find out how much to rotate. The problem is, I am not able to get this to work on top of my existing code.
Here is the current function which works - excluding the ios upload issue:
function changeAvatar(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var avatar = jQuery('.avatar_class');
reader.onload = function(e) {
loadImage(
e.target.result,
function (img) {
var imgUrl = e.target.result;
jQuery(avatar).css({'background-image': 'url('+imgUrl+')'});
jQuery('.image_value').attr({'val':imgUrl});
}
);
},
reader.readAsDataURL(input.files[0]);
}
}
jQuery('#avatarUpload').change(function() {
changeAvatar(this);
});
I have tried most of the scripts I could find here with no luck. I am just not sure how to access the EXIF data and then run a switch statement which would add css transform with attr rotate(xdeg).
Any advice would be much appreciated!
Now the question

Related

HTML Input file upload saved as very long url without PHP, AJAX, or jQuery

I have a website where you can upload files and it will be saved in a database, but is there a way where the url doesn't have to be 1 million characters long? Here's the code for uploading
function readImg(input, eltID) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(eltID).style.backgroundImage = 'url('+e.target.result+')';
};
reader.readAsDataURL(input.files[0]);
}
}
Which generates this:
Any solution?
I'm also not using any form. Using input type=file
You have to store the image data somewhere.
At the moment you appear to be choosing to store it in a data: scheme URL.
You can't reduce the size of that without making the total amount of image data smaller (e.g. by degrading the quality).
If you want a short URL, then make the URL be a reference to the image (e.g. store the file on a file system and put a static HTTP server in front of it, then the URL will be based on the filename you save the image as).
Where is the "upload" part?
Anyhow on the client side you can use createObjectURL
function readImg(input, eltID) {
if (input.files && input.files[0]) {
var url = URL.createObjectURL(input.files[0])
document.getElementById(eltID).style.backgroundImage = 'url('+url+')'
}
}

Display image with JavaScript FileReader

I'm trying to display an image before uploading it via javascript / jQuery.
I'm executing this code in the ADD-Method of the jQuery Fileuploader. The data-attribute provides me with the file
var reader = new FileReader();
reader.onload = function(e) {
var img = $('<img></img>');
img.attr('src', e.target.result);
$("#general_dropable").append(img);
}
reader.readAsDataURL(file); // Retrieved from the data-attribute of the ADD-Method of the jQuery Fileuploader
Displaying works fine. When I drag the image in Google-Chrome, however, I'm getting this error from Chrome:
He's dead, Jim! Either Chrome ran out of memory or the process for the webpage was terminated for some other reason. To continue, reload or go to another page.
Dragging the image in Firefox works fine.
The image source is the actual source code of the image, not an absolute path.
Is there a workaround to this bug?
Thank you very much.
Edit
You can see a live example here:
http://jsfiddle.net/Fractaliste/LvsYc/1669/
Just drag the image after uploading and the error will appear (In Chrome)
I just found this question on stackoverflow. But looking at the jsfiddle I don't get this exception in Chrome any more (Chrome 46). To me it looked like you forgot to define the "file" variable in your function when you write it to the DOM (reader.readAsDataURL). But in your jsfiddle it seems fixed:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#target').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
.. this is not my answer as it was fixed already in jsfiddle ... but as I was searching for a solution for my problem i wanted to clarify things here as this might help others.

"Aw Snap" error when loading large image using FileReader API

I am trying to allow a user to upload an image onto a canvas of size 200MB, but when I choose that image, I get the aw snap error from google chrome. I thought there were no limitations on the FileReader API in terms of image size.
If I set the image.src to that large image within the code, it loads in seconds. But for some reason it keeps crashing when the user tries to load it. If anyone can help with this that would be great. Or if there are any suggestions on how to load a large image to a canvas other than this that would also be great.
Thanks
function handleImage(e){
//clearAnnotations();
//annoRedraw();
//redraw();
var reader = new FileReader();
reader.onload = function(event){
image.src = event.target.result;
redraw();
}
imageName = e.target.files[0].name;
reader.readAsDataURL(e.target.files[0]);
imageLoadedCheck();
}
and handleImage function is called by this listener
imageLoader.addEventListener('change', handleImage, false);

javascript FileReader freezes browser when reading file over 500kb

I'm trying to use FileReader after user uploads pictures so that the user can preview his/her images. It works smoothly if the picture's size is about 100kb, however, when it is above 500kb, the browser will freeze for seconds. Once I upload a 2MB picture and it took the browser 1 min to load.so my question is how to make it work fast in background? or is there a way to compress the picture using javascript or jQuery before it is processed by FileReader?
function read_img(input) {
if (input.files && input.files[0]) {
for(i=0;i<$(input.files).length;i++) {
(function(file) {
var reader = new FileReader();
reader.onload = function (e) {
$(".preview").append("<img src='"+e.target.result+"'/>")
}
reader.readAsDataURL(input.files[i]);
})(input.files[i]);
}
}
}

image shown rotated on iPad and not on laptop

I've created a small test site in which you can upload a picture. And without a round-trip to the backend, the selected picture is shown. So far nothing very interesting
$('input').on('change', function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (event) {
var base64 = event.target.result;
$('<img>').attr('src', base64).appendTo('body');
};
reader.readAsDataURL(file);
});
However, I noticed that on my iPad3 some pictures are shown up-side-down. I found on google about EXIF metadata which is stored in the image (base64) which defines the orientation of the picture. But another thing is, that on my laptop the image are shown normal (with the same pictures of course). Is there any way to prevent/fix this behaviour from happening ? (I want them to show the picture the same way, and if possible I also want them to be shown normal (not up-side-down))
This is not a CSS issue. It's actually an issue with the image. Some browsers interpret the orientation of the image through meta data. Simply open the image in any image editing software and export it. Upload it to your server and let me know if that worked!
EDIT - Reference this URL for a possible solution:
Accessing JPEG EXIF rotation data in JavaScript on the client side

Categories