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

Question

我目前正在网页上使用网络摄像头(不是 native 相机)在用户的手机上拍照。像这样:

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() will ignore all EXIF metadata in images, including the Orientation. This behavior is especially troublesome on iOS devices. You should detect the Orientation yourself and use rotate() to make it right.

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

谢谢!

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