Mobile decoding issue

[ghost]

After some debugging I realized that the Barcode Reader/Uploader has issues on mobile devices because of the image's default orientation, not resolution.

http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

For example, if you take a picture with an iOs Device in Portrait mode, the image is given the orientation 6 by default, which is 90 degrees CCW. My android device is rotating it 90 degrees CW.

When uploaded to the reader, it fails out because the decoder is try to decode an image 90 CCW.

Perhaps integrating this: https://github.com/blueimp/JavaScript-Load-Image

Stackoverflow with more info: http://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images

Would solve it?

[EddieLa]

Wow, had no idea about this, I'm gonna look into this immediately and hopefully this will fix it. Thank you very much for this, it's highly appreciated.

[EddieLa]

Right so I took a look at it and while it's no problem extracting the orientation data using the library you provided, the rotation of the canvas is painfully slow. I'm however gonna try and implement at least the rotation of the image on the raw data which should be a lot faster.

[ghost]

That sounds like it would be much faster. Their demo transform is pretty quick.

Random tidbit: This line: showPicture.src = imgURL;
Causes a 404 not found error in Chrome but if you change it to this: showPicture.src = URL.createObjectURL(file); it works. Bizarre?

[EddieLa]

That's incredibly bizarre, always fun with javascript.

[EddieLa]

Maybe I should clarify, the rotation takes about 700 ms which in terms of added time to the entire decoding process is quite a lot. So not slow in reality but from my standpoint.

[tedde]

There is also a glitch in downsampling on iOS devices given large images, so I use the javascript-load-image-library to detect exif rotation and downsample with the given rotation before sending it to the scanner. Works great, however painfully slow on older mobile devices..

[EddieLa]

Yes, I haven't tested it but i'm gonna try and use this for that problem http://jsfiddle.net/gWY2a/24/

[EddieLa]

Implemented rotation for 3 types of orientation, I'm guessing the inverse ones aren't the usual ones but might add them later. Also added fix for for the downsampling on ios so I'm closing this issue.

[ghost]

Nice job! I can confirm that it is working on Android Samsung Galaxy S5 portrait mode. It is not working in landscape mode. I will test on an iOs Device. I also don't think you're revoking the file, so it's causing memory warning issues on mobile device.

[EddieLa]

After a quick look it seems that there's an issue in android where landscape doesn't register exif orientation correctly but I can't be sure. You don't happen to know what orientation is extracted?

[ghost]

On landscape it is showing Orientation 6, but I think landscape images are actually rotated 90 CCW. For example if you take any image that has been rotated (via photoshop or whatever) and try to upload it here: https://blueimp.github.io/JavaScript-Load-Image/ it does not get corrected. I don't think it's an issue with the orienation EXIF tags. I hope that made sense?

[EddieLa]

Alright, the issue is reopened and I will look into implementing different rotations for landscape and portrait.

[EddieLa]

By the way I have to ask, do you mean that in landscape it's already rotated -90 degrees or that it should be rotated -90 degrees?

[ghost]

In landscape on Android the image is already rotated -90 degrees.

[EddieLa]

Then the current implementation should work, since if it's rotated -90 and has an orientation of 6 it will be rotated 90 degrees and then it will have 0 degrees.

[carloscheddar]

Just in case you guys needed confirmation I tested the latest commit on IOS and Android and it works perfectly for portrait and landscape. Android looks a bit weird though but it works. Sorry for the potato quality pic.

[EddieLa]

Thanks for the confirmation, always appreciated.

[ghost]

I don't have it working when I took the photo in landscape mode, portrait works. Perhaps phone differences? It's awesome it's working in portrait. Minor suggestion based off of carlos: you may want to render the canvas that has been transformed instead of the image that was uploaded. If you upload an image with orientation 6 it displays sideways. May make a better visual confirmation for the end user.

[ghost]

I see why it's not working in landscape. For some reason taking a picture in landscape assigns it orientation 6, but it passes it correctly to the decoder. But the orientation is still 6, so it's being rotated though it doesn't need to be. Mobile standards are terrible.

[EddieLa]

Now the rotated image will be displayed and as for the rotation, yeah they are pretty terrible so in that case there's not much I can do about it.

[ghost]

Yep your new implementation is working great! I consider this closed :) I will respond with an iOs Update -- but it should be fine. Yes, working in iOs 7.1 -- Chrome & Safari (portrait, landscape still issue)

[EddieLa]

Think I might have an idea for the landscape issue, if the orientation tag tells me to rotate 90 degrees in either direction but the width of the image is already greater the height that would indicate a landscape image that has already been corrected.

[ghost]

I tested landscape based on latest commit, still no go.

[ghost]

landscape does work, tested on android & ios