Orientation Value from EXIF tag

Question

Orientation Value from EXIF tag

Closed this issue 12 years ago · 14 comments

Hi,

I seem to be having some issues with the orientation of the image after taking a picture. I saw your reply to Andre Fiedler on stackoverflow (http://stackoverflow.com/questions/12554947/mobile-safari-renders-img-src-dataimage-jpegbase64-scaled-on-canvas/12615436#12615436) and demonstrated how his sample image was resized correctly on your iPhone 5. However i think the orientation was correct because Andre exported the sample image from his iPhone to the web (perhaps through email) whereby the EXIF tag was removed, then you downloaded that image into your iPhone and ran imagefile-megapixel with an image not originally taken by your iPhone.

Similarly it seems to be the case that the EXIF tag is removed when I take an image with my iPhone (does not orientate correctly on Canvas), export to my computer (usually as an email attachment) and then resend it to my phone and then upload (orientates correctly) using Imagefile-Megapixel. This is somewhat of a false positive result.

Will there be any support in the future to address this EXIF tag issue?

In all other regards this is a great solution for IOS 6.0.1!

Best Regards

Answer 1 · 2012-12-07T02:02:15.000Z

Apologies I hadn't reviewed the previous issues thread. Problem solved!

Answer 2 · 2012-12-07T02:34:05.000Z

In this library it won't regard with EXIF reading. Use exif.js (https://github.com/jseidelin/exif-js).

Answer 3 · 2012-12-07T11:14:50.000Z

Apologies stomita where do i pass "orientation" to?

Answer 4 · 2012-12-07T12:03:21.000Z

See following example.

var mpImg = new MegaPixImage(file);
mpImg.render(document.getElementById('resultImage'), { maxWidth: 960, maxHeight: 960, orientation: 6 });

Answer 5 · 2012-12-08T07:27:23.000Z

Ah in the megapix-image.test.js, then how would one dynamically pass the value of orientation based on the uploaded image?

Answer 6 · 2012-12-09T12:33:13.000Z

Nevermind I solved it, it seems i was calling the function getTag incorrectly and not storing it in an array. Sorry for being a nuisance!

But if I may provide a suggestion... the resampling quality of the resized image is quite poor, this is not a megapixel specific issue but rather a canvas issue in general. http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas has a very interesting custom resampling solution to maintaining image quality for resized images. Just some food for thought!

Thanks for this great solution to iPhone 5's file api issues!

Answer 7 · 2013-10-11T15:38:27.000Z

megapixel-image.js does not seem to be compatible with iOS 7, although it works fine with iOS 6. Are there any plans to make it work with iOS 7?

Answer 8 · 2013-10-11T15:43:56.000Z

Works fine for me in iOS7. What issue are you seeing?

Answer 9 · 2013-10-11T15:50:32.000Z

Hello Ray:

The issue I am having is that megapixel-image.js will not load the image at all, using code like the following, in iOS 7:

var mpImg = new MegaPixImage(file);
mpImg.render(srcImage, { maxwidth: 960, maxheight: 960, orientation: 6 });

In other words, srcImage never gets set. The same code works fine in pre-IOS 7.

Thanks

Brian Daniels
Software Developer
BIS
405-418-7426
bdaniels@bisok.com

From: Ray Nicholus [mailto:notifications@github.com]
Sent: Friday, October 11, 2013 10:44 AM
To: stomita/ios-imagefile-megapixel
Cc: Brian Daniels
Subject: Re: [ios-imagefile-megapixel] Orientation Value from EXIF tag (#5)

Works fine for me in iOS7. What issue are you seeing?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/5#issuecomment-26147512.

The information contained in this message may be privileged and confidential. If the reader of this message is not the intended recipient, or an employee or agent responsible for delivering this message to the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately by replying to the message and deleting it from your computer.

Answer 10 · 2013-10-11T15:55:02.000Z

The only difference I see between my glue code and yours (mine works fine) is the lack of camel case in your maxwidth and maxheight properties. That seems like a problem to me.

Answer 11 · 2013-10-11T15:56:35.000Z

Ray:

Can you explain in more detail about that? I am not sure what you mean by camel case. I would love to get this working right with iPhone 5/iOS 7.

Thanks

Brian Daniels
Software Developer
BIS
405-418-7426
bdaniels@bisok.com

From: Ray Nicholus [mailto:notifications@github.com]
Sent: Friday, October 11, 2013 10:55 AM
To: stomita/ios-imagefile-megapixel
Cc: Brian Daniels
Subject: Re: [ios-imagefile-megapixel] Orientation Value from EXIF tag (#5)

The only difference I see between my glue code and yours (mine works fine) is the lack of camel case in your maxwidth and maxheight properties. That seems like a problem to me.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/5#issuecomment-26148450.

The information contained in this message may be privileged and confidential. If the reader of this message is not the intended recipient, or an employee or agent responsible for delivering this message to the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately by replying to the message and deleting it from your computer.

Answer 12 · 2013-10-11T15:59:26.000Z

Here is your code:

mpImg.render(srcImage, { maxwidth: 960, maxheight: 960, orientation: 6 });

Here is my code:

mpImg.render(srcImage, { maxWidth: 960, maxHeight: 960, orientation: 6 });

Notice that my "max" properties are in (lower) camel case. Looking at the megapixel code, it seems proper case must be observed for these properties.

Answer 13 · 2013-10-11T16:03:47.000Z

Ray:

Oh, ok. I had never heard of that term before but I understand it. If this were the issue, can you explain why it work as is in iOS 6 but not in iOS 7? I will try the solution and let you know.

One thing that may be an issue is that I am testing on an iPhone 5C under iOS 7, which has a larger screen. Could that have anything to do with why it is failing? Could the maxWidth and maxHeight values be causing the failure?

Thanks

Brian Daniels
Software Developer
BIS
405-418-7426
bdaniels@bisok.com

From: Ray Nicholus [mailto:notifications@github.com]
Sent: Friday, October 11, 2013 10:59 AM
To: stomita/ios-imagefile-megapixel
Cc: Brian Daniels
Subject: Re: [ios-imagefile-megapixel] Orientation Value from EXIF tag (#5)

Here is your code:

mpImg.render(srcImage, { maxwidth: 960, maxheight: 960, orientation: 6 });

Here is my code:

mpImg.render(srcImage, { maxWidth: 960, maxHeight: 960, orientation: 6 });

Notice that my "max" properties are in (lower) camel casehttp://en.wikipedia.org/wiki/CamelCase. Looking at the megapixel code, it seems proper case must be observed for these properties.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/5#issuecomment-26148798.

The information contained in this message may be privileged and confidential. If the reader of this message is not the intended recipient, or an employee or agent responsible for delivering this message to the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately by replying to the message and deleting it from your computer.

Answer 14 · 2013-10-11T18:08:26.000Z

Ray:

Your solution worked.

Much Thanks

Brian Daniels
Software Developer
BIS
405-418-7426
bdaniels@bisok.com

From: Ray Nicholus [mailto:notifications@github.com]
Sent: Friday, October 11, 2013 10:59 AM
To: stomita/ios-imagefile-megapixel
Cc: Brian Daniels
Subject: Re: [ios-imagefile-megapixel] Orientation Value from EXIF tag (#5)

Here is your code:

mpImg.render(srcImage, { maxwidth: 960, maxheight: 960, orientation: 6 });

Here is my code:

mpImg.render(srcImage, { maxWidth: 960, maxHeight: 960, orientation: 6 });

Notice that my "max" properties are in (lower) camel casehttp://en.wikipedia.org/wiki/CamelCase. Looking at the megapixel code, it seems proper case must be observed for these properties.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/5#issuecomment-26148798.

The information contained in this message may be privileged and confidential. If the reader of this message is not the intended recipient, or an employee or agent responsible for delivering this message to the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately by replying to the message and deleting it from your computer.