5

I have a website that allows for a photo upload via a 

<input type="file">

onChange, My javascript takes the uploaded image, converts it to base64, and displays it as the background of an html .

cool.

Problem: photos taken on mobile devices display sideways or upside down ("rotated") when I put them on the html element.

I've been doing research, and found the solution to this is to read the EXIF value from the image file, which holds the answer to which way the image should be oriented when displayed on screen.

I've been trying to extract the exif value of my base64 image for the past 3 days but haven't gotten very far.

I tried using a library, exif.js, but got a slew of unrecognizable characters as my return:

<script>            
    var isaacImg = "data:image/gif;base64,R0lGODlh...hB0SlBCBMQiB0UjIQA7"
    var x = decode64(isaacImg);
    console.log(x);
</script>

I also tried the following code from this stackOverflow answer but my browser does not recognize the object EXIF:

<script>
    var b64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABA......";
    var bin = atob(b64.split(',')[1]);
    var exif = EXIF.readFromBinaryFile(new BinaryFile(bin));
    alert(exif.Orientation); 
</script>
Community
  • 1
  • 1
quelquecosa
  • 890
  • 1
  • 10
  • 24

2 Answers2

-2

I found the following library for base64 conversion suitable for my requirement. http://jsbase64.codeplex.com/. You may want to give this a try as well.

Tarun
  • 748
  • 1
  • 13
  • 30
-3

you need to import a javascript library that gives you the EXIF object. In the page include something like this in the head section:

<script src="path/library-min.js"></script>

where path can be a number of things: a CDN url or a path relative to your own server url root path if you serve up the library yourself. library-min.js is NOT the name of the EXIF library just an example name.

Cjolly
  • 482
  • 5
  • 7