EXIF orientation information is not taken care of

[bjjl]

Have the problem with cropit not reading EXIF orientation information of photos taken e.g. with the iPhone. Any plans / possibilities to squeeze this into the library?

I see you seem to preserve some of the EXIF headers while cropping. Unfortunately, the orientation header is not one of these. Best would be to immediately show the loaded image in correct orientation, second best would be to at least preserve the orientation EXIF header..

[scottcheng]

Good point. I'm not familiar with reading EXIF and it will require some research. This library seems to provide a good solution and I'll need to look into that.

[joesolly]

I was reading that this library is a good jquery plugin just to read EXIF data: https://github.com/sanisoft/jQuery-fileExif Then I used this article to figure out how to do my Orientation transposing in order to preprocess the image before sending to CropIt. http://sylvana.net/jpegcrop/exif_orientation.html

Let me know if you want some help putting together the rotate/transpose logic, I'm just not sure where to start in your code base. @scottcheng

[scottcheng]

@joesolly Thanks for the links! They are very helpful.

I was hesitant to add a whole library like this as a dependency since it has a lot of code that we don't need in cropit. I was hoping to extract the part that we do need and build directly into cropit. I'll give the source a careful read and see what I can do.

[leifdenby]

I was just looking for this and manage to get it working with Javascript-Load-Image. I have pushed the changes I made to a commit on my fork. I am using an old version of cropit myself as I don't use webpack/requirejs at the moment. I also didn't include the Javascript-Load-Image library itself as I am not so familiar with the loading in webpack /requirejs.

[scottcheng]

@leifdenby Good work! Thanks for sharing. Those of you who don't mind adding JavaScript-Load-Image as a dependency, check out his solution!

[Asamsig]

I tested the solution @leifdenby made. The exif orientation fix does seem to work, if you can get the image to load. I tried a handful of images and could only get one to load, but I wasn't able to zoom any longer. It seems this solution will require more work before it is production ready.

[JimmyVT]

Just as a follow up. I experienced exactly the same issues as @Asamsig: Exif orientation works, cant resize, can't load all images.

[vitbokisch]

@Asamsig @JimmyVT I used EXIF js library to fix this issue. Tested on Safari, Chrome, FireFox, iOS and works well. @scottcheng As I'm not so familiar with webpack yet, feel free to update this plugin ;)

Solution: add EXIF library: https://github.com/exif-js/exif-js Edit file /src/cropit.js - http://pastebin.com/8UDHxYJi and build it via webpack or edit this function in dist file - http://pastebin.com/QriPqp0m and everything should work.

[cody1991]

I can't visit the websit :http://pastebin.com/8UDHxYJ and http://pastebin.com/QriPqp0m

.. fxxk the wall. I can visit them now.

today using the https://github.com/stomita/ios-imagefile-megapixel , I find I put my camera photo image to canvas and rotate then reset the canvas to image , start your cropper() but it is not able to zoom any longer

wating for adding exif to the master branch ( and now I'm going to read the https://github.com/exif-js/exif-js)

thanks.

---

I have used your solution on http://pastebin.com/QriPqp0m to change the /dist/cropit.js 'onPreImageLoaded' function

And find it is ok to upload a image,but has a bug :

This demo is using your ./demo/image-background.html example file

There are some black element on the right ... and my upload image is all white.

Thanks

[KILLME56k]

I fix this bug: http://pastebin.com/H2FFCCWW

[cody1991]

@KILLME56k perfect ! thank you very much

[mauromorello]

Please consider my comment on https://github.com/scottcheng/cropit/issues/92, regarding adding only a canvas rotate function binded to a UI button. And thanks for your work, @scottcheng !

[Ppppackman]

@KILLME56k I'm trying to load vertical (portrait orientation) photo on iPad and still have black field on left side. Obviously because width scale is wrong (scale width/height is wrong - height is correct, width is smaller than it gonna be).

[mike-sudyn]

https://github.com/gchudnov/inkjet Just in case, one more library for reading EXIF data.

[Manmade]

@KILLME56k Thanks a lot!!!! Works great! One problem less :-)

[pawelbrachaczek]

There is an error then I'd loaded image from js ( imageState: src: )

I tried to fix it like that:

   if (base64.split(',')[0].indexOf('base64') >= 0){
            binary_string = atob(base64.split(',')[1]);
        }
       else {
            binary_string = unescape(base64.split(',')[1]);

        }

[rich-poole]

Just in case it helps anyone else, the fix from @KILLME56k didn't work for me, it caused the onload event to fire continuously so here is the code that worked for me:

http://pastebin.com/1s00D99a

Also, I stripped out a heap of stuff from exif.js so if anyone wants a version of that that just handles orientation then this is about half the size (only a 14KB saving but it can all help)

http://pastebin.com/bCD008WM

Tested on desktop and iOS :)

[ne-u]

@ricky1981 where can i find '#orientationCanvas'?

[rickybrce]

In version 0.5 i get error: "Uncaught TypeError: canvas.getContext is not a function" Also, where I can find "'#orientationCanvas"?

So, this is not a solution for the latest version.

[jupitercow]

I want to make sure that you have seen the rotateCW and rotateCCW in the API. It isn't perfect, but it generally works for me, and was easier than dealing with exif.

// Handle rotation
$('.rotate-cw-btn').click(function() {
  $('#image-cropper').cropit('rotateCW');
});
$('.rotate-ccw-btn').click(function() {
  $('#image-cropper').cropit('rotateCCW');
});

[rickybrce]

Hello,

Yes, this works, but you need to rotate it to get correct ratio on Android phone. Because on Android when using camera in portrait mode image is rotated to the left. On landscape mode is ok. With button rotation you can get it to the right position, but I wish to be in right position without need rotation, to get better users experience. Any change that this will be fixed in next release?

[hernyb]

Guys, I have implemented it and it works fine on desktop but on iphone I get this problem. The picture shows ok when it loads in the editor but when its saved, its rotated ccw for portrait mode. What is the easiest solution to fix this? What I find weird is that in the editor it shows upright, is only after saving that the image comes back with the wrong orientation. Again, this happens only from mobile so I assume it has to do with exif information missing somewhere.

[thommydz]

@ne-u @rickybrce change: var canvas = document.getElementById("orientationCanvas"); to var canvas = document.createElement("canvas");

This made the @ricky1981 solution work for me!

[mooman]

@rich-poole solution works quite well, but a tad slow. I changed the export format to jpeg and lowered the quality a bit and got a huge boost in performance, especially on an older device.

Changed from: var finalImage = canvas.toDataURL("image/png", 1.0);

To: var finalImage = canvas.toDataURL("image/jpeg", 0.75);