Solution 1 :

Need to load an additional library:

npm i blueimp-load-image --S

Load it into your page

import loadImage from "blueimp-load-image/js";

And instead of using the fileReader, use the library like so:

  onSelectFile = e => {
    if ( && > 0) {
        img => {
          var base64data = img.toDataURL(`image/jpeg`);
          this.setState({ src: base64data });
        { orientation: true, canvas: true }

      // const reader = new FileReader();
      // reader.addEventListener('load', () =>
      //   this.setState({ src: reader.result })
      // );
      // reader.readAsDataURL([0]);

Here is a working example in codesandbox

Problem :

I’m using react-image-crop library to get users to select a picture and crop it.

The library works beautifully until you are on an iPhone. Taking a portrait (aka vertical) picture places the image in the correct rotation while cropping on canvas but on complete is in the wrong direction.

Here is a codesandbox from the creator himself.

Below is an image where on top, the cropping section, the image is in correct orientation, but the output image on the bottom is in the wrong direction.

Sample issue


Comment posted by KatiaChumakova

I get the error: “img.toDataURL is not a function”, trying to find a solution…

Comment posted by MoOx

You didn’t add “canvas: true” in the option of loadImage