是否可以在 HTML5 中修改从 Canvas 中获取的图像的 exif 数据？

Question

我试图修改 exif 数据中图像的 dpi 标头。我知道它可以在原生 iOS/Android 场景中完成。但是是否可以在 Javascript 中对从 Canvas 检索到的图像进行处理。请建议。谢谢

Answer 1

是的，这是可以通过的，

1. 您需要将画布转换为 blob（文件）
2. 您需要将 blob 转换为 DataView
3. 需要在dataview中查找exif数据，在dataview中查找exif标签位置 （偏移）
4. 需要用dataView.setUint8(offset, 值, bigEndian);
5. 将 dataview 转换为 base64 或图像或 blob

Exif 是二进制数据，所以你将把你的 dpi 转换成二进制并放到 dataview 中

您可以使用或查看ExifRestorer.js 和exif.js 中的代码。 第一个链接是插入exif数据，第二个是解析exif数据

Answer 2

在piexifjs 中尝试画布示例。

1. 获取 exif 二进制文件。
2. 从画布中获取 jpeg。

3. 将 exif 二进制文件插入 jpeg。

   // make exif data
   var zerothIfd = {};
   var exifIfd = {};
   var gpsIfd = {};
   zerothIfd[piexif.ImageIFD.Make] = "Maker Name";
   zerothIfd[piexif.ImageIFD.XResolution] = [777, 1];
   zerothIfd[piexif.ImageIFD.YResolution] = [777, 1];
   zerothIfd[piexif.ImageIFD.Software] = "Piexifjs";
   exifIfd[piexif.ExifIFD.DateTimeOriginal] = "2010:10:10 10:10:10";
   exifIfd[piexif.ExifIFD.LensMake] = "Lens Maker";
   exifIfd[piexif.ExifIFD.Sharpness] = 777;
   exifIfd[piexif.ExifIFD.LensSpecification] = [[1, 1], [1, 1], [1, 1], [1, 1]];
   gpsIfd[piexif.GPSIFD.GPSVersionID] = [7, 7, 7, 7];
   gpsIfd[piexif.GPSIFD.GPSDateStamp] = "1999:99:99 99:99:99";
   var exifObj = {"0th":zerothIfd, "Exif":exifIfd, "GPS":gpsIfd};
   
   // get exif binary as "string" type
   var exifBytes = piexif.dump(exifObj);
   
   // get JPEG image from canvas
   var jpegData = document.getElementById("canvas").toDataURL("image/jpeg", 1.0);
   
   // insert exif binary into JPEG binary(DataURL)
   var exifModified = piexif.insert(exifBytes, jpegData);