iphone croppie("result") rotates the image

[rajatj]

On iPhone, when selecting a potrait photo taken using the camera or from the media library (previously clicked photo) into the cropper, using enableExif and exif-js, the image is loaded with the correct orientation into the cropper. However, wen I call .croppie('result', { type: 'base64', size: { width: 200 } }).then(function (resp) { $("#imgUser").attr('src', resp); });

The dataURL returned in resp is rotated and not as it appears within the cropper.

[samuelryc]

I have the exact same issue here.

[samuelryc]

@rajatj Did you find a solution?

[rajatj]

@samuelryc - not yet - I am guessing I could put a workaround only for iPhone - to get the exif rotation of the image before it is sent to croppie and then apply the same rotation to the result returned from croppie but haven't quite gotten around to testing that yet - and its not ideal in any case.

[zbauman3]

I have the same issue. Not only the rotation is wrong, the result is not what is shown in the cropper.

My issue was fixed when I included exif.js which I had assumed was included.

[logan-jobzmall]

@thedustinsmith - Any priority on this ticket? Getting the same issue on iOS with canvas.toDataUrl(). I have exif-js loaded in, and have the setting set to true, but it still rotates the image I take with my phone -90 degrees (portrait) and landscape is a full -180.

this.croppie.result({
            type: 'rawcanvas',
            circle: true,
            enableExif: true,
            format: 'png'
        }).then((canvas: any) => {
            this.result = canvas.toDataURL();
})

[acpker]

Have you added the EXIF object to the window? On line 458 of croppie.js, the _hasExif() function checks if enableExif is true, and whether EXIF exists on the window object - see below:

function _hasExif() {
    return this.options.enableExif && window.EXIF;
}

This worked for me to fix this - after seeing the above in the Croppie source code, I added the following after my import statement to force exif-js on to my window object:

import EXIF from 'exif-js';
window.EXIF = EXIF;

@logan-jobzmall Have you tried adding enableExif: true to your initial Croppie statement? It should go in the options when you create Croppie rather than when you get the resulting image - see the second-to-last demo here.

[logan-jobzmall]

@ac-parker - Ahh yep. That was my mistake. I added to the initialization and it worked perfectly. Thank you.

[felisane123]

Im having the same problem and I can't solve it following the instructions here. Can someone explain with more details about where and what I should do. Thanks in advance

[sstativa]

I've just got another bug related to exif. Everything works perfectly if I select a photo of an original size from the Library or take a photo (croppie show the photo in the right orientation). However, if I select an alternative size of the photo (iOS allows you to choose from a small, medium or large versions of the photo) then the picture will be oriented wrong. I'm not sure whom to blame, either iOS of Croppie.

[NatNajera]

I solved this issue in this way. Use the exif.js but in the declaration one day y wrote wrong enableOrientartion:true, and worked..... Someboady can check if this result...

[WafflesMcDuff]

@NatNajera Can you explain your solution? I haven't had any luck yet

[tal118]

This still seems to be an issue.

Using Croppie 2.6.5, with exif.js loaded, and iPhone iOS 13.6.1 with Safari or Chrome 83. Image shows up correctly in croppie, but then when handed over to server it has extra rotation applied.

It seems that this may be the same problem that lots of other folks are seeing elsewhere, perhaps due to changes in how browsers are defaulting and/or implementing the image-orientation CSS property from none to from-image.

Some relevant-sounding description of the problem and potential workarounds, including mentions of implementing applications such as Slack:

https://www.fxsitecompat.dev/en-CA/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/

https://github.com/mattiasw/ExifReader/issues/99#issuecomment-640213079

https://bugzilla.mozilla.org/show_bug.cgi?id=1634180

Any suggestions specific to Croppie on how to deal with this?