JavaScript - 如何在网络摄像头中拍摄带EXIF数据的照片？

Question

我目前在网页上使用网络摄像头（非本机摄像头）来为用户的手机拍照。就像这样：

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

以这种方式，我现在可以成功从网络摄像头生成JPEG图像数据，并在网页上显示它。

然而，我发现EXIF数据丢失了。根据this：

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

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

谢谢！

- RainCast

Answer 1

经过Pixel 3测试，此方法可行。请注意，有时它不能与某些台式机网络摄像头配合使用。您需要exif-js从示例中获取EXIF对象。

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

- jsDev

---

嗨，jsDev，你从哪里获取EXIF对象？它似乎不是本地的。 - Matas Vaitkevicius

@MatasVaitkevicius 你好，是的，它是 exif-js 的一部分。链接 - jsDev

ImageCapture 在 Firefox 和 Safari 浏览器中无法使用。 - Sahil

Answer 2

很遗憾，无法从画布中提取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'])

- Mike Kovařík

Answer 3

首先，根据我目前所找到的，似乎没有办法在画布上下文绘制时包含exif数据。

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

虽然有些混乱和不太正规，但现在这是一个解决方法。 谢谢！

- RainCast