We Keep Coding

Iphone Photo Upload EXIF roate not working

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

Loading client's images into a canvas

I have been searching this website for answers to this question, but I couldn't seem to find any. So I want to have the client provide an image to be loaded into a canvas for processing and that's it. So I don't want to save it on the server or on a cloud, but I just want to copy the image to an HTML5 Canvas to be processed from there. Is there a way I can do that without actually saving the file?

I'm not sure if I understand your question. You want that the user can open an image from the client and you load it into a html5 canvas. correct?
If so: you can use an input field of type file. In your code you use URL.createObjectUrl to create object urls from the local selected images. With "Image" you can load the image and in the onload event you draw it to the canvas.
var file = document.getElementById('file'); // the input element of type file
file.onchange = function(e) {
var ctx = document.getElementById('canvas').getContext('2d'); // load context of canvas
var img = new Image();
img.src = URL.createObjectURL(e.target.files[0]); // use first selected image from input element
img.onload = function() {
ctx.drawImage(img, 0, 0); // draw the image to the canvas
}
}

Set text in image on iOs' browser

iOS' browser only allows JavaScript FileReader to read images. Renaming images to .txt will make them fail the check, so I guess some validation exists.
Is there a way to bypass it?
$("#fileinput").change(function(evt){
var r = new FileReader();
r.onload = function(evt){ //file loaded successfuly
contents = evt.target.result;
...
}
r.readAsText(f);
});

HTML5 - Create dynamically an image from a local path?

Is it possible to create an HTML image, if I have only a path to a local file? I tried to use a filereader, but the mere path does not work. how can I solve the issue?
JS
var reader = new FileReader();
reader.onload = {
$('#myImg').attr('src', e.target.result);
};
reader.readAsDataURL("file:///C:/Users/me/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg ");

This is a simple tool I have made for reading files in JavaScript:
Fiddle
The JavaScript code is:
var reader = new FileReader();
reader.onerror = function(ev) {
$('#output').html('=== Error reading file ===');
}
reader.onload = function(ev) {
$('#output').html(ev.target.result);
};
reader.readAsDataURL(e.target.files[0]);
When you select an image file it will present you with a base64 dataURI of the image.
I recommend not trying to select a file that's not an image, I don't know what'll happen.

something like this?
var x=document.createElement("img");
x.src="C:\data\images\test.jpg";
x.style.height="50px";
document.getElementById('whereimgoing').appendChild(x);
Also I should add that if this is on a website then it will depend highly on browser security

var reader = new FileReader();
reader.onload = function(e) {
$('#myImg').attr('src', reader.result);
};
reader.readAsDataURL("file:///C:/Your/path/msohtmlclip1/01/clip_image002.jpg");
Should be fine, if access to local files is granted (check your browser settings or try if it works when deployed on a server (either localhost or www.yourserver.com).. Local files can always cause some troubles as browser behave differently. Also try to not use the temp folder.

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