Image wrong orientation in html5 preview - javascript

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

Related

Is it possible to resize an image that is stored in a Uint8Array without using the browser's built-in canvas implementation?

I need to compress and rotate the image in the browser. Image sources can be drag'n'drop from a local user or the image can be downloaded from an URL with the same domain as the page with this script. But asking for permission to use HTML5 canvas doesn't fit into the design specification in any way.
The image can be in JPEG, PNG or HEIC format and in the current implementation is stored in Uint8Array. Is it possible to generate a thumbnail or change image orientation without using canvas?
No browser that I know of will ask for permission to use a canvas. Using a canvas is the quickest solution to do this (it's very simple indeed), and HEIC support is easy too: https://alexcorvi.github.io/heic2any/

How to avoid image rotation in angular 4 app

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

Changing image rotation using Javascript best practice

I am attempting to upload an image by capturing from camera on android phone. After searching why the image shows rotated I found the reason was due to the image EXIF of the captured image. And I was wondering what is the best practice to rotating the image back to normal, is it after uploading the image or when viewing the image?
Also I need assistance in writing the JavaScript code for that given that I have an image element and file input element.

jQuery upload that will resize the image with some resolution

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

Strip out EXIF data from Image using Cropit

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!

Categories