文章目录
  1. 1. 安装
  2. 2. 用法

本文仅做翻译记录查看,GitHub地址:https://github.com/exif-js/exif-js

Exif.js用于从图像文件中读取Exif元数据的 JavaScript库。

您可以在浏览器中的图像上使用它,可以是图像或文件输入元素。检索Exif和Iptc元数据。该软件包也可用于AMD或CommonJS环境。

注意:Exif标准仅适用于.jpg和.tiff图像。此软件包中的Exif逻辑基于Exif标准v2.2(JEITA CP-3451, included in this repo)。

安装

exif-js通过NPM安装:

1
npm install exif-js --save

或者在在HTML中使用script添加一个引用本地文件。

1
<script src="exif.js"></script>

注意:这里没有提供.min.js。如果你想要的话,请自己压缩。

如果您更喜欢其他包管理器,您可能会管理:D。或者您可以GIT克隆此存储库或下载它的ZIP文件并解压缩exif.js到您的项目。

用法

该包添加了一个全局EXIF变量(或AMD或CommonJS等价物)。

从调用EXIF.getData函数开始。您将图像作为参数传递给它:

  • 来自a的图像 <img src="image.jpg">
  • 或者用户在<input type="file">页面上的元素中选择的图像。

作为第二个参数,您可以指定回调函数。在回调函数中,您应该使用this访问上述图像的元数据,然后可以根据需要使用它。该图像现在有一个额外的exifdata属性,它是带有Exif元数据的Javascript对象。您可以访问它的属性以获取图像标题,拍摄照片的日期或方向等数据。

你可以得到所有的tages EXIF.getAllTags()。或者获取单个标记EXIF.getTag(),其中您将标记指定为第二个参数。要使用的标记名称列EXIF.Tags在exif.js。

重要说明:请注意,在调用getData或任何其他功能之前,您必须等待图像完全加载。否则它会默默地失败。您可以通过在window.onLoad函数上运行exif-extraction逻辑来实现此等待。或者在图像自身的onLoad功能上。对于jQuery用户,请注意,您不能(可靠地)使用jQuery的ready事件。因为它在加载图像之前触发。您可以使用$(window).load()而不是$(document.ready()(请注意`exif-js不依赖于jQuery或任何其他外部库)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload=getExif;

function getExif() {
var img1 = document.getElementById("img1");
EXIF.getData(img1, function() {
var make = EXIF.getTag(this, "Make");
var model = EXIF.getTag(this, "Model");
var makeAndModel = document.getElementById("makeAndModel");
makeAndModel.innerHTML = `${make} ${model}`;
});

var img2 = document.getElementById("img2");
EXIF.getData(img2, function() {
var allMetaData = EXIF.getAllTags(this);
var allMetaDataSpan = document.getElementById("allMetaDataSpan");
allMetaDataSpan.innerHTML = JSON.stringify(allMetaData, null, "\t");
});
}
1
2
3
4
5
6
<img src="image1.jpg" id="img1" />
<pre>Make and model: <span id="makeAndModel"></span></div>
<br/>
<img src="image2.jpg" id="img2" />
<pre id="allMetaDataSpan"></pre>
<br/>

注意还有备用标签,例如EXIF.TiffTags。有关完整定义和使用,请参阅源代码。您还可以使用相应打印的图像中的所有EXIF信息返回一个字符串EXIF.pretty。

文章目录
  1. 1. 安装
  2. 2. 用法