16

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).

ajgarn
  • 775
  • 7
  • 18
  • You could use CSS `transform: rotate(90deg)` but that's CSS3 stuff. Doesn't *mean* HTML5 but a browser that can't handle html5 will likely not handle CSS3 – floribon May 12 '15 at 01:57
  • @floribon. Hi, the problem is actually that I want to edit the picture file, i.e. save a rotated version of the picture to my server. That said, the wish for non-HTML5 is not that important really, if I can find a solution anyhow. – ajgarn May 12 '15 at 18:31
  • @ajgarn. I came to think of a hack that's probably really inefficient. What if we use the Parse Cloud module to save to png then save back to jpg? I hope this can be achieved quickly enough though.... – Stephane Maarek May 15 '15 at 15:43
  • 1
    I recently had to deal with a similar issue, but in a .net environment. I used this to solve the issue: http://csharphelper.com/blog/2011/08/read-an-image-files-exif-orientation-data-in-c/ Perhaps it's possible to migrate this code into an appropriate script. – Luoruize May 17 '15 at 20:08

2 Answers2

3

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:

cmbuckley
  • 40,217
  • 9
  • 77
  • 91
  • 1
    Thanks! Unfortunately [jpegorientation](https://www.npmjs.com/package/jpegorientation) depends on [gm](https://www.npmjs.com/package/gm) which has a lot of dependencies. To include those into Parse Cloud Code could be unmanageable, I suppose. But I will definitely check out [exif-rotate](https://www.npmjs.com/package/exif-rotate) which only had two dependencies! – ajgarn Apr 22 '15 at 14:18
  • @ajgarn, I'm looking into the same, did you find a workable solution? if yes, can you share some of the code? Thanks so much! – Stephane Maarek May 10 '15 at 18:21
  • 1
    @Stephane: Sorry, I haven't really had time to finish a solution yet. The needs for my application was changed a bit so it may take some extra time, but when I find a workaround I will share it! – ajgarn May 11 '15 at 19:09
0

I ended up writing a client-side class for rotating and resizing the uploaded images. I'm using the Canvas element and HTML5 FileReader.

For source code and some examples, please see https://github.com/ajgarn/CanvasImageUploader.

The class gives you the image data (a Blob), which can be posted to Parse's REST API the same way as you would have uploaded a file via FileReader.

ajgarn
  • 775
  • 7
  • 18