JavaScript - 如何使用 EXIF 数据在网络摄像头中拍照？

Question

我目前在 web 页面上使用网络摄像头（不是本机摄像头）在用户的手机上拍照。 像这样：

var video: HTMLVideoElement;
...
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
var jpegData = canvas.toDataURL('image/jpeg', compression);

通过这种方式，我现在可以成功地从 web 相机生成 JPEG 图像数据，并将其显示在 web 页面上。

但是，我发现 EXIF 数据丢失了。 据此：

Canvas.drawImage()将忽略图像中的所有 EXIF 元数据，包括方向。 这种行为在 iOS 设备上尤其麻烦。 您应该自己检测方向并使用 rotate() 使其正确。

我希望 JPEG 图像包含 EXIF GPS 数据。 是否有一种简单的方法可以在此过程中包含相机 EXIF 数据？

谢谢！

Answer 1

在 Pixel 3 上测试 - 可以。 请注意 - 有时它不适用于某些桌面网络摄像头。 您将需要exif-js从示例中获取EXIF object。

  const stream = await navigator.mediaDevices.getUserMedia({ video : true });
  const track = stream.getVideoTracks()[0];
  let imageCapture = new ImageCapture(track);
  imageCapture.takePhoto().then((blob) => {
      const newFile = new File([blob], "MyJPEG.jpg", { type: "image/jpeg" });
      EXIF.getData(newFile, function () {
          const make = EXIF.getAllTags(newFile);
          console.log("All data", make);
     });
  });

Answer 2

不幸的是，没有办法从 canvas 中提取 exif。

虽然，如果您可以访问 jpeg，则可以从中提取 exif。 为此，我建议使用exifr而不是广受欢迎的 exif-js，因为 exif-js 已经有两年没有维护了，并且仍然存在重大错误（n 未定义）。

使用 exifr，您可以解析所有内容

exifr.parse('./myimage.jpg').then(output => {
  console.log('Camera:', output.Make, output.Model))
})

或者只是几个标签

let output = await exifr.parse(file, ['ISO', 'Orientation', 'LensModel'])

Answer 3

首先，根据我目前发现的情况，在 canvas 上下文绘制期间没有办法包含 exif 数据。

其次，有一种变通的方法，就是从原始JPEG文件中提取exif数据，然后在canvas上下文绘制之后，将提取的exif数据放回新绘制的JPEG文件中。

它很乱而且有点hacky，但现在这是解决方法。 谢谢！