0

I am using filepicker.io to upload an image from iOS device to Filepicker.

In my code, I am using image tag ">. When I view the image: 1) on a desktop browser (Chrome) it's upside down (rotated 180 degrees) 2) I view the same HTML page from my mobile device (iOS) and it's the right way up. 3) If I just view the filepicker.io link (I not via imag tag) in a browser it's the right way up.

Any ideas?

aginsburg
  • 1,223
  • 1
  • 12
  • 22

2 Answers2

1

Indeed some browsers ignore the EXIF orientation info. This mostly affects IOS devices. I've worked around this by transforming images right after they are uploaded:

filepicker.convert(InkBlob, 
     {width: 800, format: 'jpg', quality: 85, rotate: "exif"}...
Robert Moskal
  • 21,737
  • 8
  • 62
  • 86
  • Thanks. Was trying to see if I could workit out client side. I ended up using http://www.graphicsmagick.org and doing it server side with .autoOrient() which is pretty much the same as using filepicker convert option. Thanks again. – aginsburg Jul 31 '14 at 20:57
  • We were doing that for a while too, but since we are letting filepicker write to an S3 bucket, it's more efficient to let them do it. – Robert Moskal Jul 31 '14 at 21:10
0

OK, it's the "orientation" and I guess some browsers seem to auto-apply/fix this. The short of it is, I need to find out what the orientation is and then apply/rotate the image accordingly.

I have managed to do this manually with JavaScript loadImage.

I am trying to work out how to do it dynamically in this thread Can't get EXIF info using loadImage.parseMetaData I have an idea of what to do, it's just not working... but I'll leave that to be sorted out in that thread.

Community
  • 1
  • 1
aginsburg
  • 1,223
  • 1
  • 12
  • 22