Correctly rotate image taken on android using ImageCapture

Question

I'm using ImageCapture api to capture a screenshoot from a camera of a user device.

The problem is that photos taken on android get rotated incorrectly. They are rotated incorrectly both in the photo preview, before the image is uploaded, and after it is uploaded.

My plan was to read the exif data from a blob that I get from image capture, find orientation in exif and use javascript to rotate the image correctly, but there is no usable exif data because it isnt jpg.

My code:

function takePhoto(img) { 
imageCapture.takePhoto()
.then(blob => {
  // EXIF.getData(blob, function() {
  //      myData = this;
  //      console.log( myData );
  //   });
    let url = window.URL.createObjectURL(blob);
    img.src = url;
    console.log( blob );
    // stop the camera and hide canavas
    stream.getVideoTracks()[0].stop();
    $("#webcam").hide();
    image = blob;
    $("#photo-info").slideDown('slow');
})
.catch(function (error) {
    console.log(error);
});
}; 

takePhoto(document.querySelector('#camera-feed'));

Is there a way to detect if a image is rotated incorrectly when using ImageCapture?

Answer 1

I could not get this working, along with some other problems, so I decided to ditch ImageCapture all together and go with this:

<input type="file" accept="image/*" capture>

This opened the device camera as soon as user clicked on the input button, which is exacly what I needed, but since the taken photo came with exif on android I could correctly rotate it.

For the rotation itself, I used this library