I've captured a photo from in apple iphone 5s.
Dimension of the image is 960x1280.
Horizontal and vertical resolution is 72 dpi, Bit depth 24.
When I show the image in the img tag, the image is automatically rotated from portrait to horizontal.
But when I see the actual image, but the image is in computer in portrait mode only.
I don't know where is the issue.
I've opened in the ms paint to. I didn't get the issue.
I really confused in this. I've opened the image(which is in portrait mode) in ms paint and saved again in the same portrait mode itself. Now I've showed in the img tag, now the image is showing correctly in portrait mode itself in img tag. No issue has occurred. Working perfectly. Why the ios image is dynamically changing from portrait to horizontal?. I've checked with [http://imgur.com/ ]. The same issue has occurred in this application too.
How to resolve this?
Sometimes when you take a photo with an iPhone it embeds orientation information in the Exif metadata. Some applications understand this, some don't (web browsers don't), so you see different results.
Saving in MS Paint or, for example, "Save for Web" in Photoshop saves the image in the correct orientation, and strips the Exif data. You can also manually rotate the image on your phone, which will actually change the pixels, rather than just the Exif data.
Related
I am working on a web app that allows users to upload files to our CDN network, and then displays the images on the web app. However, I noticed something weird when uploading images through iOS (Safari) and possibly other browsers too.
When the highest resolution image is selected, the image is uploaded in its correct dimensions and shape.
However, when a lower resolution is selected, the uploaded image ends up being rotated on upload. I am not sure, if this happens with the CDN, or somewhere with the iOS file select feature, but its weird, since it works fine with the "Actual size" image.
You can see images below, to re-produce the error.
Pay attention the image shape, and file size. As "Actual size" the file size is 3.5MB!
Now, after we click on "Choose image size", following appears. I will choose "Medium".
After, you will see the file size is just 164KB. Reduction of -95.31%.
Then, pay attention to the shape, after the image is uploaded. You will see it is different rotation.
Does anyone have any clue as to why this happens? I am not sure if this has anything to do with the CDN I am using, because as I said before, when the "Actual size" image is selected, the uploaded image is perfectly fine. Only when size is changed through iOS "File selector" it changes rotation.
Also, another concern I have, is that these high resolution images are not necessary for my application. Sometimes we are talking +8MB for images, due to their high resolution and dimensions. Does anyone know if it's somehow possible to specify the image size for uploads on iOS/Android as default - so the user does not have to do anything? That would be ideal.
The images generated during choosing by iOS are missing the data for Orientation in the EXIF data for the image. That's why the image is correct when you upload the actual image, it seems oriented properly, but isn't right when it is a different size. You can check that by uploading the original and different sizes at https://exifinfo.org/. You'll see the different Orientation data in the EXIF section.
Since this is an iOS Safari specific feature, you can't rely on being able to choose multiple sizes of images that are being uploaded. A more reliable, cross-platform solution would be to resize the image yourself using a Canvas. This will however still probably require the user to upload the full size image, then you would have to process it on the canvas and upload it to your API.
I am displaying lots of similar images in img tags. But browswer is automatically autorotating image in landscape mode. How can we prevent this?
Below is one of sample image.
https://fuloop.com/backend/web/upload/post_image/1493385167_1493252982_JPEG_20170426_171917.jpg
Thanks
Shyam
I think you can use css image-orientation in FF and Safari.
However if you want to fix the orientation in Chrome, I would suggest to use css transform to rotate your image...
Additionally, if you're a vue.js developer, you can simply use this vue-img-orientation-changer to fix the incorrect img orientation.
vue-img-orientation-changer is a vue directive plugin.
Check the example:
Fix Img Orientation
Github Repository: vue-img-orientation-changer
This is because there is EXIF data saved from whatever camera was used to take the image. You can get an image editor or tool that edits the EXIF data to set it to the orientation that you want.
Your linked image shows up for me in portrait mode in Chrome, but in IE it showed up rotated in landscape mode. Firefox, seemed to load the dimensions in landscape mode first but then rotated it into portrait mode. It ended up looking a bit glitchy.
Some image editors such as GIMP will ask if you want to rotate the image upon opening it as it detects the orientation in EXIF is different from the actual orientation. If you indicate that you want GIMP to rotate it, then save it, it should be in the correct orientation.
I have some photos that were uploaded by a user who complained that the vertical photos were changed to landscape orientation when they were resized. Indeed, that was the case and in an effort to just move things along I reoriented the photos and uploaded in place. That had no effect when the pictures were viewed inside of a webpage though!
To make as simple a test as possible I created a bare bones web page with no CSS and a single IMG element with no attributes other than src. That continues to show the photo in landscape mode. Copy the photo's URL and paste into another tab and the photo shows in vertical mode. Download the file and open in Windows and it shows in vertical mode.
http://www.texashiking.com/test/PhotoOrientation.htm
The files are being stored on Azure BLOB storage.
I've duplicated this with Chrome version 56, Edge version 38 and Internet Explorer 11.
What could be causing this?
Your image has embedded exif orientation data which is presumably being ignored when rendering the page. See this answer for a bit more detail.
Basically, the camera you took the image with stored it in landscape, but stored some metadata with it saying that the image needs to be rotated 270°. The browser is apparently ignoring this tag when rendering it in the webpage, but not when you access the image directly.
When I view the image properties (see below) on my windows machine, it clearly says width:144 and height:256. But when viewing it in the browser the dimensions are flipped.
Example of it flipped in the browser:
http://jsfiddle.net/pLyg7ug9/2/
Direct link (notice that it loads correctly in chrome):
http://pro-cuts.herokuapp.com/images/slideshow/thumb/8_flipped.jpg
What would cause the browser to flip the width and height?
This is due JPEG Rotation and EXIF Orientation. Basically your camera has a sensor that rotates the image depending on how you take it. Phones that have their orientation locked will have these issues.
If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.