使用 ImageCapture 正确旋转在 android 拍摄的图像

Question

我正在使用 ImageCapture api 从用户设备的摄像头捕获屏幕截图。

问题是在 android 上拍摄的照片旋转不正确。在照片预览中、图片上传之前和上传之后，它们都被错误地旋转了。

我的计划是从我从图像捕获中获得的 blob 中读取 exif 数据，在 exif 中找到方向并使用 javascript 正确旋转图像，但是没有可用的exif数据，因为它不是jpg。

我的代码：

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'));

有没有办法检测使用 ImageCapture 时图像是否旋转不正确？

Answer 1

这取决于您使用的设备，您应该分两步处理拍摄后的照片：

验证照片是否旋转。
如果需要旋转照片。

要验证照片是否旋转，您可以使用 ExifInterface，要旋转，您可以使用矩阵将其反转并使用位

您可以在 this question

找到更多相关信息和代码示例

Answer 2

我无法正常工作，还有一些其他问题，所以我决定放弃 ImageCapture 并继续这样做：

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

这会在用户单击输入按钮时立即打开设备摄像头，这正是我所需要的，但是由于拍摄的照片在 android 上带有 exif，所以我可以正确地旋转它。

对于旋转本身，我使用了this库

使用 ImageCapture 正确旋转在 android 拍摄的图像

Correctly rotate image taken on android using ImageCapture

javascript

android

exif

image-capture

mediastream