I have an angular application that allows you to choose a profile picture. Performing tests I noticed that when I take images from an iPhone in portrait mode and upload the image to my app it is shown rotated, however if I take the photo in landscape mode the image shows correctly. Additionally, perform this same test on an android device, and the result is that both in portrait mode or landscape mode the image shows correctly. My question is how to avoid this behavior since I want the images to always be displayed without rotations. Below is an example of the problem mentioned:
All images uploaded should be displayed this way:
I check the files uploaded from ios physically on the server and none of them are rotated. The problem seems to be the visualization from the app.
What should I do so that the images are always displayed without rotation from my angular application?
I have done a stackblitz to show the implementation made for this component
stackblitz
I appreciate that someone can help me, and explain to me why this strange behavior is due.
Many Thanks!
The problem here is with something called EXIF data. This is an extra set of metadata captured with the image which has location, time, apereture but also orientation.
If you want to display the image correctly after uploading it to the server, you could simply rotate the image based on the exif orientation, and then strip the exif data. This way, the image is always displayed "correctly", both in browsers that understand EXIF and browsers that don't.
This is explained here: Fix iOS picture orientation after upload PHP
If you want to display the image correctly before uploading (e.g. preview), your best bet is using a HTML canvas and then rotating the image based on it's orientation. Please see this topic for more information: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
Related
I have been going through a few SO questions and getting bits and pieces from it, but the solution is not fully apparent. What I have is a Django web server and in my model for posts I have an ImageField. I have then created my form and that renders fine.
I can use the input tag just fine, and it will upload to the server and location saves to the database. The problem comes when I take an image on an iOS device in portrait and view it on another platform e.g. Android, Desktop, the image will be rotated.
Now I have found out that when you take an image on iOS it will keep the resolution as landscape and put into the EXIF data the orientation of the image to make it portrait.
So finally my question is, what is the best approach to this issue. The options I have seen as are:
In the webpage where the upload occurs, transform the image and reset the orientation then upload to the server.
Upload as is, and in my view do the transform/reset before the save.
Again upload as is, and I render the image in the view detail post and fix it there.
I will also at some point also be creating some thumbnails and smaller instances of the image. Only thing my javascript skills are not the greatest!
Thanks
For working with images python has some good packages.
Pillow :
You can use it from this link:
https://pillow.readthedocs.io/en/4.1.x/
or Easy thumbnails for Django (it is easy version and based on Pillow)
https://pypi.python.org/pypi/easy-thumbnails
I have a form input file, and when we upload an image, it will resize the image 2 times. First the original image will resize to square resolution(100x100), and second the original image will resize to landscape resolution(1000x500). After upload the square resolution will go to folder square and landscape will go for folder landscape.
So the original image won't be saved to the database, but the resized images will. Do you think a jQuery plugin for my case exists?
Javascript/Jquery is not the right choice there.
Javascript/Jquery work client side: they operate on users pc and not on your server. Maybe there are some plugins capable of resizing images, but surely you won't be able to store them in different folders using Javascript/Jquery
Such an operation must be done on your server, with a sever side language like PHP, NodeJS (still uses Javascript language), Java or many others.
The answer is based on the language off your choice, so i can't give a general one
I am using Cropit (http://scottcheng.github.io/cropit/) to zoom and crop user uploaded images - but on some devices when image is selected in comes in rotated. Zoom and crop occurs prior to image upload (loads images locally via FileReader) so I was hoping to perform 'whatever needs to be done' in the CropIt js file.
I've done some research and it looks like the best way to correct this is to remove the orientation exif data from the image (versus rotating using canvas as the orientation data would remain and could cause undesired effects when displaying image later). I can't seem to figure out where to add code (and what code to add!) in the jquery.cropit.js.
Thanks!
Please see my project:
http://webgl.unilimes.com/project/3dhouse/
On desktop, images are uploaded fine using the camera button:
However, unfortunately, on IOS this is not the case:
the image is cropped, there's lots of weird lines across it and it in no way represents the background image uploaded. Furthermore, the desktop app successfully reads the images EXIF data and moves the model accordingly, whilst IOS does not
here are two example images
Picture of the scene.
Picture for location
Any pointers as to what is going wrong would be greatly appreciated. I've seen background imagery uploaded with three.js on IOS before, so im hoping there is a solution, as for the exif reader I don't know. Thanks
Suppose my image is not upright (I open it in window browser and the image it not upright), but when I upload it to some server (such as gmail, stackoverflow). The image becomes upright.
I asked this question is that I am writing a preview logic with html5 and javascript. The image that I talk about show what exactly I see in window browser. Just wondering if the server did some trick to adjust the orientation?
Image shown in windows:
Image that directly upload to stack overflow:
I'm guessing you are talking about an image you generate or manipulate client-side using a canvas element that is then rendered back into an img tag. Correct?
Server-side, the orientation can be determined by looking at the image's EXIF orientation flag. It IS possible to examine this flag client-side using a library like jQuery fileExif.
If you use a script like ImageInfo you can fetch EXIF data (if the image has it). If it hasn't you practically can't know why it happened. Might be some "fake" displaying on the computer you are working on. Some image managers might keep duplicates of an originally rotated image.
The EXIF property Orientation might tell you if the image is changed, based on it's dimensions compared to it's orientation.
On Server Side:
You can use a tool like Graphics Magic to auto-orient the image correctly: http://www.graphicsmagick.org/GraphicsMagick.html
gm.exe -convert -auto-orient MyImage.jpg MyImageCorrectOrientation.jpg