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?

score 0 · Answer 1 · answered Nov 06 '19 at 04:02

0

It depends on the device you are using, you should deal with the picture after taken in two steps:

Validate if the photo is rotated.
If necesary rotate the photo.

To validate if the photo is rotated you can use ExifInterface and to rotate you can use a matrix to invert it playing with the bits

You can find more related information and code example at this question

answered Nov 06 '19 at 04:02

Juan Monsalve

51
7

Im developing webapp(js) so I cant use exifinterface, also from what I have read mostly jpgs have exif – failedCoder Nov 06 '19 at 06:38
oh ok... you should then figure out how the webapp counterpart to ExifInterface works. Hope you find out your solution then. – Juan Monsalve Nov 06 '19 at 16:04

score 0 · Accepted Answer · answered Nov 22 '19 at 16:37

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

Correctly rotate image taken on android using ImageCapture

2 Answers2