程序员节带你玩转图片Exif信息获取之JavaScript

   日期:2024-12-28     作者:9aaf0       评论:0    移动:http://mip.riyuangf.com/mobile/news/10263.html
核心提示:1024是2的十次方,二进制计数的基本计量单位之一。1G=1024M,而1G与1级谐音,也有一级棒的意思。程序员就像是一个个1024,以最

 

程序员节带你玩转图片Exif信息获取之JavaS<i></i>cript

       1024是2的十次方,二进制计数的基本计量单位之一。1G=1024M,而1G与1级谐音,也有一级棒的意思。程序员就像是一个个1024,以最低调、踏实、核心的功能模块搭建起这个科技世界。1024程序员节是广大程序员的共同节日。从2015年起,每年10月24日定义为程序员节。以一个节日的形式,向通过coding改变世界,也以实际行动在浮躁的世界里,固执地坚持自己对于知识、技术和创新追求的程序员们表示致敬。在致敬技术的同时,有点程序猿(媛)们的自我调侃的意思。马上就是2022年10月24日,正好与1024这个数字吻合,这是我的第7个程序员节了。那么你呢,朋友。这是你的第几个1024?在这个专属的节日里,祝广大IT圈的兄弟姐妹们节日快乐,祝愿大家的系统系统不宕机,程序不报错,测试评审一遍过,系统绝不报警,产品同学不为难你,最最重要,发量要多,气质要在线。

       之前的博文,曾经简单介绍了在后台使用JAVA来获取图片和视频文件的Exif信息,博文地址:轻松获取图片和视频文件的Exif信息-Java篇,这是从系统后台的角度来进行读取。这么做的好处就是可以使用后台来接收处理这些图片信息,那对于应用来讲,就完全依赖后台了。那么针对图片这种信息,有没有直接通过前端技术,比如使用JavaScript来获取呢?

       答案肯定有的,如果您不想通过后台接口去获取图片的Exif信息,那么您大可以使用Exif.js,这个库来完成对图片信息的获取。本文将介绍如何使用Exif.js来读取图片的Exif信息,通过代码示例的方式来深入探索,并给出运行案例。

        Exif.js一个JavaScript库,主要用于从图像文件中读取 Exif信息。你可以在浏览器中的图像上使用它,可以从图像或文件输入元素中使用。同时检索EXIF和IPTC元数据。

注意:EXIF标准仅适用于“.jpg”和“.tiff”图像。Exif.js的开源地址为:Exif-js地址,喜欢中文的可以参考汉化版:汉化版Exif.js,有兴趣的朋友可以自行下载学习。以下是我本机的工程实例目录(英文版):

        exif.js引入的方式跟普通的javascript文件引入没什么区别,使用<script/>进行引入即可。如下面的参考语法:

        下面是具体在Html页面中如何展示信息。

注意:在调用  或任何其他函数之前,必须等待图像完全加载。否则它不会起任何作用。 可以通过在  函数上运行EXIT提取方法来实现此等待。或者在图像自己的  函数上。 对于 jQuery 用户,请注意您不能(可靠地)为此使用 jQuery 的  事件。因为它会在加载图像之前触发。 您可以使用 $(window).load() 代替 $(document.ready()(请注意,)。

      这里演示直接获取网页上一张图片的附属信息,html部分示例代码如下:

     Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展。在现在的应用中,会存在将图片信息进行字符流化的,因此需要对字符流化的数据也进行加载。示例代码如下:

 注意: 使用设备(如相机、手机、摄像头等)拍摄的照片进行测试,这样照片才有 EXIF 数据。

       Exif.js同时也支持使用文件上传的方式对图片的信息进行加载。其原理和第一种的方式几乎是一样的。所以这里展示一下示例页面吧。

 
特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

举报收藏 0打赏 0评论 0
 
更多>同类最新资讯
0相关评论

相关文章
最新文章
推荐文章
推荐图文
最新资讯
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号