Exif.js 介绍
Exif.js 提供了 JavaScript 读取图像的原始数据的 功能 扩展,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。 ?
Exif.js安装
npm install exif-js --save
或者
bower install exif-js --save
Exif.js 用法
该包 添加 了 一个 全局EXIF变量(或AMD或Commo njs 等价物)。
从 调用 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或任何其他外部库)。
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 all Meta Data = EXIF.getAllTags(this);
var all Meta DataSpan = document.getElementById("all Meta DataSpan");
all Meta DataSpan.innerhtml = jsON.stringify(all Meta Data,null,"t");
});
}
<img src="image1.jpg" id="img1" />
<pre>Make and model: <span id="makeAndModel"></span></div>
<br/>
<img src="image2.jpg" id="img2" />
<pre id="all Meta DataSpan"></pre>
<br/>
注意还有备用 标签 ,例如EXIF.TiffTags。有关完整定义和使用,请参阅源 代码 。您还可以使用相应打印的图像中的所有EXIF信息返回 一个 字符串EXIF.pretty。
Exif.js注意事项:
EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC 端也会用到,此 插件 兼容主流浏览器,IE10 以下 不支持 。
GitHub: https://github.com/exif-js/exif-js
网站描述: 在 node 和 浏览器中读取 EXIF 图片 元信息的 JavaScript 库
Exif.js官方网站
官方网站:
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。