收集整理了一份《2024年最新物联网嵌入式全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升的朋友。
需要这些体系化资料的朋友,可以加我V获取:vip1024c (备注嵌入式)
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人
都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
之前的博文,曾经简单介绍了在后台使用JAVA来获取图片和视频文件的Exif信息,博文地址:轻松获取图片和视频文件的Exif信息-Java篇,这是从系统后台的角度来进行读取。这么做的好处就是可以使用后台来接收处理这些图片信息,那对于应用来讲,就完全依赖后台了。那么针对图片这种信息,有没有直接通过前端技术,比如使用JavaScript来获取呢?
答案肯定有的,如果您不想通过后台接口去获取图片的Exif信息,那么您大可以使用Exif.js,这个库来完成对图片信息的获取。本文将介绍如何使用Exif.js来读取图片的Exif信息,通过代码示例的方式来深入探索,并给出运行案例。
三、Exif.js
1、Exif.js 简介
Exif.js一个JavaScript库,主要用于从图像文件中读取 Exif信息。你可以在浏览器中的图像上使用它,可以从图像或文件输入元素中使用。同时检索EXIF和IPTC元数据。
注意:EXIF标准仅适用于“.jpg”和“.tiff”图像。Exif.js的开源地址为:Exif-js地址,喜欢中文的可以参考汉化版:汉化版Exif.js,有兴趣的朋友可以自行下载学习。以下是我本机的工程实例目录(英文版):
2、Exif.js 引入
exif.js引入的方式跟普通的javascript文件引入没什么区别,使用
<script type="text/javascript" src="exif.js"></script>
下面是具体在Html页面中如何展示信息。
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></pre>
<br/>
<img src="image2.jpg" id="img2" />
<pre id="allMetaDataSpan"></pre>
注意:在调用 getData
或任何其他函数之前,必须等待图像完全加载。否则它不会起任何作用。 可以通过在 window.onLoad
函数上运行EXIT提取方法来实现此等待。或者在图像自己的 onLoad
函数上。 对于 jQuery 用户,请注意您不能(可靠地)为此使用 jQuery 的 ready
事件。因为它会在加载图像之前触发。 您可以使用 $(window).load() 代替 $(document.ready()(请注意,exif-js 不依赖于 jQuery 或任何其他外部库
)。
四、多场景展示数据获取
1、原始图片直接获取
这里演示直接获取网页上一张图片的附属信息,html部分示例代码如下:
<img src="example/DSCN0614_small.jpg" id="img1" width="430px" height="300px"/>
<img src="example/Bush-dog.jpg" id="img2" width="430px" height="300px"/>
<img src="example/IMG_1402.JPG" id="img6" width="430px" height="300px"/>
<br/>
<img src="example/dsc_09827.jpg" id="img3" width="430px" height="300px"/>
<img src="example/IMG_1731.JPG" id="img4" width="430px" height="300px"/>
<img src="example/IMG_1816.JPG" id="img5" width="430px" height="300px"/><br/>
<script>
document.getElementById("img1").onclick = function() {
EXIF.getData(this, function() {
var make = EXIF.getTag(this, "Make"),
model = EXIF.getTag(this, "Model");
alert("I was taken by a " + make + " " + model);
});
}
document.getElementById("img2").onclick = function() {
EXIF.getData(this, function() {
alert(EXIF.pretty(this));
});
}
document.getElementById("img3").onclick = function() {
EXIF.getData(this, function() {
alert(EXIF.pretty(this));
});
}
document.getElementById("img4").onclick = function() {
EXIF.getData(this, function() {
alert(EXIF.pretty(this));
});
}
document.getElementById("img5").onclick = function() {
EXIF.getData(this, function() {
alert(EXIF.pretty(this));
});
}
document.getElementById("img6").onclick = function() {
EXIF.getData(this, function() {
alert(EXIF.pretty(this));
});
}
</script>
2、base64 编码文件加载
Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展。在现在的应用中,会存在将图片信息进行字符流化的,因此需要对字符流化的数据也进行加载。示例代码如下:
document.getElementById("base64test").onclick = function() {
var image = new Image();
![img](https://img-blog.csdnimg.cn/img_convert/b92c034d0b5c0f3573658b72e28e9238.png)
![img](https://img-blog.csdnimg.cn/img_convert/9fd4dd51913d33291c304e65d0f422bf.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上物联网嵌入式知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频,并且后续会持续更新**
**需要这些体系化资料的朋友,可以加我V获取:vip1024c (备注嵌入式)**
**[如果你需要这些资料,可以戳这里获取](https://bbs.csdn.net/topics/618679757)**
将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频,并且后续会持续更新**
**需要这些体系化资料的朋友,可以加我V获取:vip1024c (备注嵌入式)**
**[如果你需要这些资料,可以戳这里获取](https://bbs.csdn.net/topics/618679757)**