Read EXIF Data and Rotate Uploaded Image in Browser

[url removed, login to view] (second page) allows you create a member profile and upload up to six images.

we recently added javascript code to show a preview of each uploaded image and resize it if necessary before uploading.

when we added that code however, we started getting many profile images coming in sideways because our code which shows the preview and resizes is ignoring EXIF image orientation info.

here is another website that reads EXIF data of an uploaded image and generates a properly rotated image on an HTML5 canvas.

[url removed, login to view]

we need someone with appropriate JS/HTML5 skills to update our JS code to rotate the preview image and generate the canvas image with the proper rotation so it uploads correctly.

please find attached an image which has the orientation problem. if you download it and then upload it into our page, you should see the problem and be able to use a debugger to investigate.

there is a JS function called previewImage() called from onchange when a file is selected to upload. that function first sets the SRC= url for the pre-existing preview image element and then goes on to generate a resized image using HTML5 canvas if the image needs to be resized before uploading. the resized image goes into a variable with _resized suffix. later when we do AJAX upload, we check each file input field to see if a resized variable containing an image object exists, and if so we replace the file input element with the image variable in the formData object.

so, based on EXIF data, we can use CSS transform property to rotate the preview image element, but need to also rotate canvas properly to make rotated image object for uploading.

this app is based on Ruby on Rails but this task can be done without updating any server code. if you can update the JS in the page and get a working solution, we will take care of adding it to the page generated from the server.

we would like to review details on a web meeting so please don't reply if you don't have a fast internet connection and adequate english verbal skills.

and we don't need project managers for this task. please reply only if you are the engineer who will work on the problem - after you have reviewed the problem in detail and know you can solve it. we need someone with direct expertise in this, not someone "willing to learn." we already posted this once with no success.

we have ongoing need for web development help, so if this task goes well, there is opportunity for more. for example, we would like to add Image Crop and Rotation options for the end user on this and other pages. but that will be a future project.

Thank You.

CSS HTML5 JavaScript

Numer ID Projektu: #11291860

O projekcie