JavaScript: Adjust Image Orientation Before Mobile Upload With EXIF

Question

I am trying to upload an image to Firestore from a mobile device but the image orientation remains landscape when it should be portrait.

Basic process:

• Upload Image with 'input' image file
• Get orientation with EXIF and adjust to canvas accordingly
• Upload new canvas to Firestore

Problem:

When previewing the canvas the orientation and sizing is correct but once uploaded on Firestore the image is still in the original (incorrect) orientation.

Question:

Is there an issue with the code?

Am I only orienting for display and not changing the actual EXIF data? If so, how do I edit so it will upload in the correct orientation?

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    var image = new Image();

    reader.onload = function(e) {
      $('#editImage').attr('src', e.target.result);

      EXIF.getData(input.files[0], function() {
        // Fetch image tag
        // Create canvas
        var canvas = document.createElement("canvas");
        var img = document.createElement("IMG");
        img.setAttribute('src', e.target.result);

        // run orientation on img in canvas
        orientation(img, canvas);
      });
      image.onload = function() {
        // access image size here 
      };
    };
    reader.readAsDataURL(input.files[0]);
    console.log(reader);
  }
}

function orientation(img, canvas) {
  // Set variables
  var ctx = canvas.getContext("2d");
  var exifOrientation = '';

  // Set Width and Height
  var width = img.width;
  var height = img.height;

  var MAX_WIDTH = 600;
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }

  console.log(width);
  console.log(height);

  // Check orientation in EXIF metadatas
  EXIF.getData(img, function() {
    var allMetaData = EXIF.getAllTags(this);
    exifOrientation = allMetaData.Orientation;
    console.log('Exif orientation: ' + exifOrientation);
  });

  // set proper canvas dimensions before transform & export
  if (jQuery.inArray(exifOrientation, [5, 6, 7, 8]) > -1) {
    canvas.width = height;
    canvas.height = width;
  } else {
    canvas.width = width;
    canvas.height = height;
  }

  // transform context before drawing image
  switch (exifOrientation) {
    case 2:
      ctx.transform(-1, 0, 0, 1, width, 0);
      break;
    case 3:
      ctx.transform(-1, 0, 0, -1, width, height);
      break;
    case 4:
      ctx.transform(1, 0, 0, -1, 0, height);
      break;
    case 5:
      ctx.transform(0, 1, 1, 0, 0, 0);
      break;
    case 6:
      ctx.transform(0, 1, -1, 0, height, 0);
      break;
    case 7:
      ctx.transform(0, -1, -1, 0, height, width);
      break;
    case 8:
      ctx.transform(0, -1, 1, 0, 0, width);
      break;
    default:
      ctx.transform(1, 0, 0, 1, 0, 0);
  }

  // Draw img into canvas
  ctx.drawImage(img, 0, 0, width, height);
  console.log(canvas.toDataURL());
  var DataURL = canvas.toDataURL();

  UploadFile(DataURL);
}

Answer 1

I was facing the same issue, I am really happy to share steps how I resolved this.

Problem:

Few smartphones, especially Samsung and iPhone take the picture in landscape mode. But browsers are not smart enough to render this image properly.

Resolution:

step1: you can read image EXIF info and based on the orientation data you can render the image the way you wanted. "exif-orientation-image" npm package will come in handy for this.

"exif-orientation-image" will read the image file and returns canvas with the properly oriented image. Then you can render the canvas on the screen.

step2: If you want to upload the properly oriented image to the server, then instead of rendering the canvas in step 1, convert canvas to data URL and then data URL to file. And use this converted file to upload to the s3 bucket or any of the server you are using.