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

4
  • 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, 2015 at 1: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, 2015 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.... May 15, 2015 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: csharphelper.com/blog/2011/08/… Perhaps it's possible to migrate this code into an appropriate script.
    – Luoruize
    May 17, 2015 at 20:08

2 Answers 2

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:

3
  • 1
    Thanks! Unfortunately jpegorientation depends on 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 which only had two dependencies!
    – ajgarn
    Apr 22, 2015 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! May 10, 2015 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, 2015 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.