When I view a photo I took using my Samsung Galaxy Note 3 using Windows Photo Viewer, the image is oriented correctly.
However, when I scp it to my website, it's rotated 90 degrees when viewed in Chrome, but displays correctly in firefox. The image in question is this one: http://drazzy.com/e/espruino/etc/20140925_152033.jpg
Why doesn't it display correctly in Chrome? How can I make my images display correctly in Chrome?
Imagine is displayed being rotated 90 degrees for both Chrome and Firefox for me. Find the original picture and open it on your computer. Depending on how you took it, the phones accelerometer may have simply registered a different rotation when you took the picture. Open it in paint, select the picture as a whole, and rotate is 90 degrees counter clock wise.
Related
I am running a html game inside an iFrame. The game is displaying on a canvas.
I am testing the game on Chrome mobile simulator Pixel 5 device size 851x393
I was testing to see whether game display correctly when the user rotate the device.
portrait mode window.innerwith/height is showing as 851 1843
landscape mode window.innerwith/height is showing as 851 393
I am also puzzled, how can innter width/height change when the device rotate?
But the game does display correctly. Following are the elements of each state
Landscape
Portrait
With these settings the game display correctly.
When I rotate the device few times, the game got expand beyond the screen, as if we are looking at a zoomed upper left hand corner of the game.
However the elements seems to be exact match when it display correctly before. Even though game is not displaying correctly now.
Can anyone provide some assistance on this ?
I am creating a web site where end users can upload a photo and have it superimpose under a calendar as a gift
All works perfectly in Chrome or FF, however in IE I have an issue with scaling the image, it only scales in the x axis meaning it squishes the image rather than makes the whole image bigger or smaller.
When you click on the plus or minus sign to scale the image, I am changing the inline width style for the canvas element.
I have tested it on IE 9 and 10, any ideas whatis going on?
Here is the link - http://www.submitphoto.com.au/new/diary.php
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.
We have a website that used HTML5 canvas and KineticJS to scale and resize and rotate an image on top of another image and then save them together as a new image. For some reason it does not show up correctly in IE9. It works perfect in FireFox, Chrome and Safari, but in IE9 the only thing that does not work is the rotate tool. Which is set in 15 degree increments and works by dragging the slider either left or right and it rotates the images slightly by 15 degrees depending on the direction you drag it.
Could it not be working because IE9 is not supporting the html5 tag..I am confused.
I have a Joomla website and I observe a problem with some images.
In Chrome images look really good and sharp but in Firefox and IE the images are not that sharp and the colors are a bit strange.
Take a look at the photos below. The difference is more obvious on the Standings were the emblems of the teams are really small.
Any suggestions??
Image using Chrome
Image using Firefox
Website URL:
http://www.neasalamis.net
You're telling the browser to scale the image from 150 pixels to 60 pixels.
Most browsers aren't good at that.
You should create images that are exactly the right size using an image editor.
This will give you complete control over how the image is scaled (image editors do a much better job than Firefox), and make the files smaller too.