0

I stumbled into this very unusual behaviour. I capture an image from the device camera using accept="image/*" and then scale it down using a Canvas, on some mobile devices the image comes out CCW 90 degrees rotated. I run into this iPhones with IOS version lower than 13.4.1

$('#photo').on('change', PreviewImage);

function PreviewImage()
{
  let img = new Image();
  img.src = URL.createObjectURL(this.files[0]);
  img.onload = function()
  {
    var canvas  = document.createElement('canvas');
    var context = canvas.getContext('2d');

    const f = img.width / 512;

    canvas.width = img.width / f;
    canvas.height = img.height / f;

    context.drawImage(img, 0, 0, canvas.width, canvas.height);

    $('#preview').prop('src', canvas.toDataURL('image/jpeg'));
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <input id="photo" type="file" accept="image/*" capture="user">
  <br>
  <img id="preview">
</body>

Also here is codepen url, incase you cant see the snippet on mobile https://codepen.io/sarge/pen/oNjJpBR

Edit: I just tried removing the scaling part to be sure of that was the cause, indeed drawing full size, then using toDataURL works fine, the problem occurs only when image is scaled down.

Edit: On the phones with this issue I tested on Firefox, Chrome and Safari. All browsers producethis problem, can safely say this is irrelated to browser.

Edit: EXIF stripping did not work.

Edit: Here is a screenshot of what I get on Iphone 6 (12.4.5), you can see the tiny preview in the input looking correct. enter image description here

Sarge
  • 388
  • 1
  • 4
  • 22
  • look at https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images drawimage could ignore rotation metadata – Bacon May 20 '20 at 14:00
  • Hi @Bacon, I used loadImage a while ago when I trying to fix the issue with exif. The problem occurs during scaling which is a neccesary operation for my case. Without scaling part image is always correct. LoadImage library does not scale the image itself but just adds `width="100" height="100"` which does not help me in this case. Also some devices still send wrong exif info which causes wrong rotations. – Sarge May 20 '20 at 14:33

0 Answers0