I have this annoying problem where Safari Mobile rotates the pictures I take with the phone camera. The weird thing is that it only happens while in portrait mode.
Here's a code sample: http://jsfiddle.net/Kazpp/
As you can see I'm adding the image as background of the preview div and setting the background-size property as cover so I can keep the image aspect ratio and fill the whole div area with the image.
I also tried adding an image element as children of my div, but that didn't worked either.
Does anyone have any clue on what's going on here?
Ps.: I'm having this issue on iOS 6.0. Didn't tried another iOS version.
You're running into an Exif orientation issue JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
As answered in that post you can use this library to check image orientation and rotate accordingly https://github.com/blueimp/JavaScript-Load-Image
Related
When taking a picture using the filepicker.io upload dialog in mobile safari with a portrait angle... the picture gets rendered sideways when completing upload. During upload it is the correct orientation. How to fix?
Use a conversion and add rotate="exif" to maintain the rotation encoded in the image's EXIF data.
https://developers.inkfilepicker.com/docs/web/#inkblob-images
I am using a UIWebView in my app and when I rotate my iPhone the webview rotates along with it, works just fine. However, you see the corners of the background view behind my webview as it rotates and it can look a little flickery when rotating.
So I went and tried Safari on my iPhone, using the same website and it different. In Safari if I rotate, its far smoother, I can also see it zooms slightly.
For example, I am on Apple's homepage in portrait mode, fully zoomed out to see the whole page. I rotate to landscape and the contents zooms, as far as I can observe this is why it looks smoother.
So, my question, how can I achieve this in my app?
I have played with the 'Scales Page To Fit' option but had no success.
Currently:
Rotating scales the webpage to fit the view. (Whole page is zoomed out to be seen).
Required:
When rotating, rather than rescaling the page, just let it zoom as required.
Don't know if this will help you, but you might find it useful to change the background color (or even background image) of the view behind your webview, which might mitigate your issue with seeing the corners.
If you haven't found a solution yet... As an alternative you could try refreshing the webview, if you notice that the device has rotated, refresh webview and webkit should renderize it again, also play with the HTML meta viewport tag (initial zoom, scale, etc.) and CSS media queries to support different scales. As for the HTML document, try using em, and pt units in CSS rules.
//reload webview
[self.webView reload];
link Orientation Notifications
hope this help in something
I am in the middle of creating a custom background page with simple UIImage inside a UIImageView.
What I am trying to do is to be able to fit my image the way photos app handles images.
for default portrait camera pics : seems like an aspectToFill?
for default landscape camera pics : aspectToFit for whole page (320,480)
other custom saved pics: ???
Here, I want to avoid as much empty space possible without hurting how images are perceived to the users.
Thanks for your suggestions
you must use aspectFit if you want to see the whole image, at the correct aspect ratio.
you are assuming that its aspectFill for portrait. But that'd be true only for a portrait image being viewed in Portrait (or a landscape image viewed in landscape).
I've started working on a mobile page and I've made the css so that the page can expand or contract and look fine. When I rotate the page though, by turning my iphone sideways, instead of resizing as though there is a new screen size (wide), it's zooming in. I have an image on the page and I really don't want it to zoom in, because it pixelates the image. I would rather it resize as though it was a new page.
You can see it here:
http://scclib.com/mobile
I figured it out by adding this meta tag, I haven't tested it on android or ipads, but this at least solves my problem for iphone.
My application supports taking pictures from iPhone in portrait mode and upload to the server.
However, the pictures taken are appearing in sideways once uploaded to the server.
Please help!
-KC
Keep in mind that the image has an associated imageOrientation property that will determine the correct orientation to display the image.
Images captured used AV Foundation (at least using AVCapture, which I'm using) are taken in landscape mode, so you have to rotate them clockwise before sending to the server.