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.
Related
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
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!
I love the circular profile pictures, but I hate that you cant edit them. Say for example you dont want the circle in the middle and the standard size, but you want it smaller or something.
Explanation with pictures:
The 4 images, from bottom to top: input, image editor, moving circle, output
Now, I want that you put a normal image in and that there will be a black overlay with some kind of opacity. In the middle you'll have a transparent circle so you can select the part you want in the circle. Then you can press save and there will be a .png file made.
I was thinking of doing this with jQuery watermarks, but I couldn't figure it out. Anyone got a idea?
There are a couple of methods:
You can use CSS2/3 - with corner-radius (for newer browsers) or even just an overlay image, image can be cropped, and background can be scaled/moved via CSS background-position and background-size accordingly. To save the image, you'll need a minimalistic PHP script do do the same operation server-side (given the parameters) and output the image to user.
You can also use HTML5 canvas - specification involves a handy clip method (which is straightforward - limits drawn imagery to current path), and you can obtain the image data via toDataURL method of canvas element as long as image is uploaded to the same server (or cross-domain rules are done right). A minimal search on saving files from JS+HTML5 should further assist.
Sample jsfiddle - http://jsfiddle.net/u2A7t/
I'm working on a site where a user can edit a banner for them selves and I'm planning to use kineticJS for the image editor. The thing is, the banner will go for print and the result image has to be 5014px by 12402px. It is possible to have an image sized like that, but the stage size would be only the 4% (200x496) of the final image? If not, what would you suggest to do to render a huge image like that? (I was thinking to generate a data file at the end of editing, then render the image in PHP with GD).
Thank you for your answers!
Just upload the huge image to the server without displaying it on canvas.
If you need to give the user visual feedback you can resize the image in PHP and send back the 4% image for Kinetic to display.
Here's a link to a php resizer: http://php.net/manual/en/imagick.resizeimage.php
BTW, 60M+ upload exceeds the default limits of PHP server so be sure you reconfigure your server!
Weeell, if you can restrict your users to use shapes only to draw their content you could serialize the stage and convert it to a vector format.
Then you can render this vector format to whatever size of bitmap you want.
But that's quite a project...
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