Exif.js
一个JavaScript库,用于从图像文件中读取 EXIF元数据。
您可以在浏览器中的图像上使用它,可以从图像或文件输入元素中使用。同时检索EXIF和IPTC元数据。
这个包也可以用于AMD或CommonJS环境。
注意:EXIF标准仅适用于“.jpg”和“.tiff”图像。这个包中的EXIF逻辑是基于EXIF标准V2.2(JEITA CP-3451,包含在这个仓库中)。
汉化版:http://quping.com/themes/quping/assets/js/exif.js
安装
通过 GIT 安装 exif-js
:
git clone https://github.com/exif-js/exif-js
通过 NPM :
npm install exif-js --save
Or Bower:
bower install exif-js --save
然后在HTML中的最佳位置中添加一个引用本地文件的 script
标记。
<script src="vendors/exif-js/exif-js"></script>
您还可以使用 jsDelivr 上托管的压缩版本
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
用法
该包添加了一个全局 EXIF
变量(或AMD或CommonJS等效变量)。
从调用 EXIF.getData
函数开始。 将图像作为参数传递给它:
- 任何一张图片来自
<img src="image.jpg">
- 或者用户在页面上通过
<input type="file">
元素选择的图像。
作为第二个参数,您可以指定回调函数。在回调函数中,应该使用 this
访问带有上述元数据的图像,然后可以根据需要使用这些元数据。
该图像现在有一个额外的 exifdata
属性,它是一个带有 EXIF 元数据的Javascript对象。您可以访问它的属性来获取数据,如 图像标题、拍摄日期 或 定位。
您可以使用 EXIF.getTag
获取所有标记。或者使用 EXIF.getTag
获取一个标记,在这里将该标记指定为第二个参数。
要使用的标记名称在 exif.js
的 EXIF.Tags
中列出。
重要: 请注意,在调用 getData
或任何其他函数之前,必须等待图像完全加载。否则它不会起任何作用。
可以通过在 window.onLoad
函数上运行EXIT提取方法来实现此等待。或者在图像自己的 onLoad
函数上。
对于 jQuery 用户,请注意您不能(可靠地)为此使用 jQuery 的 ready
事件。因为它会在加载图像之前触发。
您可以使用 $(window).load() 代替 $(document.ready()(请注意,exif-js 不依赖于 jQuery 或任何其他外部库
)。
JavaScript:
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");
});
}
HTML:
<img src="image1.jpg" id="img1" />
<pre>Make and model: <span id="makeAndModel"></span></pre>
<br/>
<img src="image2.jpg" id="img2" />
<pre id="allMetaDataSpan"></pre>
<br/>
注意还有其他标记,类似 EXIF.TiffTags
。有关完整的定义和用法,请参见源代码。
您还可以使用 EXIF.pretty
返回一个字符串,漂亮的输出图像所有EXIF信息。
检查包含的 index.html。
XMP
由于问题#53已合并,因此也支持提取XMP数据。为了不减慢速度,这是可选的,您需要在使用 ..getDatat()
之前调用 EXIF.enableXmp();
。
请参考 源代码 以获得更高级的用法,例如从 File/Blob 对象获取图像数据(EXIF.readFromBinaryFile
)。
贡献
这是一个开源项目。请通过分叉此仓库并发出拉取请求来进行贡献。这个项目已经有了显著的贡献,比如读取ITPC数据。
您也可以通过 请提交错误或新特性问题 作出贡献。 或者改进文档。当您对基本功能中建议的更改执行请求时,请更新此自述文件。