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

【问题标题】：Correctly rotate image taken on android using ImageCapture使用 ImageCapture 正确旋转在 android 上拍摄的图像
【发布时间】：2020-03-02 10:48:59
【问题描述】：

我正在使用 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 时检测图像是否旋转不正确？

【问题讨论】：

标签： javascript android exif image-capture mediastream

【解决方案1】：

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

验证照片是否旋转。
如有必要，请旋转照片。

要验证照片是否旋转，您可以使用 ExifInterface 并旋转您可以使用矩阵来反转它与位一起播放

您可以在this question找到更多相关信息和代码示例

【讨论】：

我正在开发 webapp(js)，所以我不能使用 exifinterface，而且从我读到的大部分 jpgs 都有 exif
哦，好吧...然后您应该弄清楚与 ExifInterface 对应的 webapp 是如何工作的。希望你能找到你的解决方案。

【解决方案2】：

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

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

只要用户点击输入按钮，这就会打开设备相机，这正是我所需要的，但由于拍摄的照片带有 android 上的 exif，我可以正确旋转它。

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

【讨论】：