javascript - 从页面上的图像中检索二进制数据/EXIF

Question

我需要访问已加载到页面上的图像中的 EXIF 数据。说，从浏览器扩展。 AFAIU，有一些 javascript 方法可以完成任务:

• 使用JavaScript-Load-Image ;
• 使用Nihologic EXIF manipulation library ;
• 在 Canvas 上绘制图像。

前两种方法要么处理本地文件，要么需要向服务器执行额外的(在这种情况下是多余的)请求以检索二进制数据。后者可能有效:

var canvas = document.createElement("canvas");
canvas.width = oImg.width;
canvas.height = oImg.height;

// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(oImg, 0, 0);

// Get the data-URL formatted image
var dataURL = window.atob(canvas.toDataURL("image/jpeg", 1.0).split(',')[1]);

但生成的二进制对象不包含 EXIF 数据(0xE1 标记，)似乎一旦在 Canvas 上绘制，它就会产生 JFIF(0xE0) 标记代替。

所以，我的问题是:是否可以访问页面上已加载图像的二进制数据？

请注意:有similar questions已经在 SO 上，但没有人回答如何不重新加载图像并访问 EXIF 数据的问题。

我知道我可以将图像本地保存到 LocalStorage 中，然后使用上面提到的库，但它看起来也有点矫枉过正。

Answer 1

Is it possible to get an access to binary data of already loaded image on the page?

不，不幸的是，这是不可能的，不是来自用于图像的原始二进制文件数据。图像经过处理后，原始二进制数据被丢弃。

图像加载过程是一个完全独立的过程，根本不涉及 Canvas —— Canvas 在这里是无辜的! :-)

浏览器大致按照以下方式加载图像，所有这些都在内部发生，没有来自 JavaScript 或 DOM 的访问(不一定在所有阶段都按此顺序):

• 连接到服务器
• 加载数据以确定文件类型
• 如果是受支持的文件类型，则加载所有数据
• 如果支持，提取 ICC 和 Gamma 定义
• 提取 EXIF 方向/旋转(如果存在)
• 将文件解压缩/解码为位图
• 在可用和支持的情况下应用 Gamma 和 ICC 校正
• 使用对位图的内部引用更新 Image 对象
• 广播一个load事件
• 在任何地方调用onload

当您收到 Image 对象时，一切都已准备就绪并设置 - 文件的其余部分和从中提取的信息将被丢弃，包括。 EXIF 数据(除了支持它的浏览器中的 EXIF 方向，但仅供内部使用，不可从 JavaScript 读取并且仅用于 DOM - 尽管它可能会破坏预期的布局，但通常会被忽略)。我相信大多数浏览器都能够读取这个标志，但据我所知只有 Safari 移动版实际使用它(我在这里可能是错的，但它不会改变答案的本质)。

只剩下一张带有RGBA信息的位图。您现在可以将其插入 DOM 或将其绘制到 Canvas 上，但元信息在执行此操作之前已被删除。当您从 Canvas 中提取数据 uri(如 png 或 jpeg，并不重要)时，提取仅基于 canvas 的位图，而不是其上使用的原始图像(图像是除了视频和路径之外，无论如何只是一个图形来源)。

由于目前没有官方 API 可以从 Image 对象访问 EXIF 数据，唯一读取 EXIF 数据的方法是将图像作为二进制流读取到二进制文件中使用 JavaScript 手动和低级别地缓冲和提取数据。这就是为什么您列出的库必须这样做的原因。不过，缓存可能会派上用场。

这可能不是您所希望的，但我们别无选择 - 或者 - 在服务器端执行此操作(例如在上传时)。然后，您可以提供一种机制来将缓存的 EXIF 数据加载为 JSON 对象或类似对象。