question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

iphone croppie("result") rotates the image

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:4
  • Comments:12

github_iconTop GitHub Comments

6reactions
onynthacommented, Apr 5, 2019

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.

1reaction
NatNajeracommented, Apr 23, 2020

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…

Read more comments on GitHub >

github_iconTop Results From Across the Web

croppie.js blank image in returning result only on IPhone
Steps to Reproduce the Problem · click 'add' button · select an image from your gallery · Modal is open now. · try...
Read more >
Rotate crop box fixed aspect ratio - Apple Community
I have no idea how to do this in iOS 9. The rotate icon rotates the entire picture, along with the crop box....
Read more >
Croppie - a simple javascript image cropper - Foliotek
8 rotated counter-clockwise by 90 degrees. destroy(). Destroy a croppie instance and remove it from the DOM. result({ type, size, format, quality, circle...
Read more >
Laravel – Crop and upload an image with jQuery Croppie
Using croppie js we can easily crop images before uploading. ... <button class="btn btn-default" id="rotate" data-deg="-90">Rotate</button> ...
Read more >
Croppie - a simple javascript image cropper - Museum Thailand
Croppie is a fast, easy to use image cropping plugin with tons of configuration options! View on Github Get Result ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found