一个JavaScript库,用于从图像文件中读取EXIF元数据。

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.jsEXIF.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数据。

您也可以通过 请提交错误或新特性问题 作出贡献。 或者改进文档。当您对基本功能中建议的更改执行请求时,请更新此自述文件。


exif.js 中文 说明 汉化 文件



Copyright © 2006-2020 quping.com, All rights reserved. 鲁ICP备09092435号-1

QQ 微信