微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Exif.js

编程之家收集整理的这个编程导航主要介绍了Exif.js编程之家,现在分享给大家,也给大家做个参考。

Exif.js 介绍

Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。  

Exif.js安装

npm install exif-js --save

或者

bower install exif-js --save

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或任何其他外部库)。

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");

});

}

<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。

Exif.js注意事项:

EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC 端也会用到,此插件兼容主流浏览器,IE10 以下不支持

GitHub:https://github.com/exif-js/exif-js

网站描述:在 node 和 浏览器中读取 EXIF 图片元信息的 JavaScript 库

Exif.js

官方网站:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。