Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rotate uploaded pictures containing EXIF orientation in Parse Cloud Code

Portrait pictures, taken from some mobile devices, uploaded via an HTML form gets the wrong orientation while embedded in a web page.

This is due to the EXIF orientation metadata, which could for instance have the value 6 = Rotate 90 CW telling the image to be displayed with a specific orientation. However, the image itself - without metadata - is stored sideways as a horizontal image. Depending on the image renderer, you will either see the image correctly (as the left thumbnail below) or without the rotation metadata applied (as the right thumbnail). For images embedded in websites, it is the latter.

Portrait picture with EXIF orientation Rotate 90 CW, displayed with and without metadata applied

Is there any way to rotate the uploaded picture manually using either Javascript or Node.js, in a Parse Cloud Code hosted web app? (Parse Cloud Code only supports a few dependencies - but you could still upload small scripts yourself).

like image 556
ajgarn Avatar asked Apr 21 '15 16:04

ajgarn


People also ask

How can I modify embedded Exif data in a photo?

If you’re handy with the command line, in OS X or Windows, you can also use the free ExifTool to modify embedded EXIF data in photographs. We’re always looking for problems to solve!

What happens if you rotate a JPEG image?

But if a camera (or other software) rotates a JPEG after it’s been saved in that format, each decompression, rotation, and recompression progressively ruins the image . The trick that camera makers came up with was to avoid rotating pixels and, instead, set a flag in the EXIF metadata that’s incorporated in any image their camera exports.

How many different orientations can be represented with the Exif orientation tag?

(Rotations that aren’t aren’t at right angles always involves modifying image data to approximate the new angle.) Eight different orientations can be represented with a value for the EXIF Orientation tag.

How do I get the orientation of an image on iPhone?

Two images, one in the same rotation as the image-sensor array in the iPhone and the other rotated, have their Orientation value tagged in EXIF data. Any software that can display an image should be able to read this orientation flag and display a photo in the correct orientation.


1 Answers

You should be able to use npm modules in cloud code: Using npm modules in cloud code

Once you've got that working, the jpegorientation npm module should meet your requirements:

var jpeg = require('jpegorientation');

jpeg.autoRotate('image.jpg', function (err) {
    // error handler 
});

If you can't get the npm modules working, you can always include the library manually. If you run into problems with that library and node-gyp, there are other modules to consider:

  • exif-rotate (combined with exif or exif-component to determine the orientation)
  • fix-orientation (looks browser-based)
like image 122
cmbuckley Avatar answered Oct 06 '22 00:10

cmbuckley