javascript - 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 数据丢失了。据此：_

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

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

谢谢！

标签： javascriptjpegwebcamexif

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