目錄
一、前言
二、背景
三、Exif.js
? ? ? ? ?1、Exif.js 簡介
2、Exif.js 引入
四、多場景展示數(shù)據(jù)獲取
1、原始圖片直接獲取
?2、base64 編碼文件加載
?3、文件上傳的方式加載
?五、總結(jié)
一、前言
? ? ? ?1024是2的十次方，二進制計數(shù)的基本計量單位之一。1G=1024M，而1G與1級諧音，也有一級棒的意思。程序員就像是一個個1024，以最低調(diào)、踏實、核心的功能模塊搭建起這個科技世界。1024程序員節(jié)是廣大程序員的共同節(jié)日。從2015年起，每年10月24日定義為程序員節(jié)。以一個節(jié)日的形式，向通過coding改變世界，也以實際行動在浮躁的世界里，固執(zhí)地堅持自己對于知識、技術(shù)和創(chuàng)新追求的程序員們表示致敬。在致敬技術(shù)的同時，有點程序猿（媛）們的自我調(diào)侃的意思。馬上就是2022年10月24日，正好與1024這個數(shù)字吻合，這是我的第7個程序員節(jié)了。那么你呢，朋友。這是你的第幾個1024？在這個專屬的節(jié)日里，祝廣大IT圈的兄弟姐妹們節(jié)日快樂，祝愿大家的系統(tǒng)系統(tǒng)不宕機，程序不報錯，測試評審一遍過，系統(tǒng)絕不報警，產(chǎn)品同學(xué)不為難你，最最重要，發(fā)量要多，氣質(zhì)要在線。
二、背景
? ? ? ?之前的博文，曾經(jīng)簡單介紹了在后臺使用JAVA來獲取圖片和視頻文件的Exif信息，博文地址：輕松獲取圖片和視頻文件的Exif信息-Java篇，這是從系統(tǒng)后臺的角度來進行讀取。這么做的好處就是可以使用后臺來接收處理這些圖片信息，那對于應(yīng)用來講，就完全依賴后臺了。那么針對圖片這種信息，有沒有直接通過前端技術(shù)，比如使用JavaScript來獲取呢？
? ? ? ?答案肯定有的，如果您不想通過后臺接口去獲取圖片的Exif信息，那么您大可以使用Exif.js，這個庫來完成對圖片信息的獲取。本文將介紹如何使用Exif.js來讀取圖片的Exif信息，通過代碼示例的方式來深入探索，并給出運行案例。
三、Exif.js
1、Exif.js 簡介
? ? ? ? Exif.js一個JavaScript庫，主要用于從圖像文件中讀取 Exif信息。你可以在瀏覽器中的圖像上使用它，可以從圖像或文件輸入元素中使用。同時檢索EXIF和IPTC元數(shù)據(jù)。
注意：EXIF標準僅適用于“.jpg”和“.tiff”圖像。Exif.js的開源地址為：Exif-js地址，喜歡中文的可以參考漢化版：漢化版Exif.js，有興趣的朋友可以自行下載學(xué)習(xí)。以下是我本機的工程實例目錄(英文版)：
?2、Exif.js 引入
? ? ? ? exif.js引入的方式跟普通的javascript文件引入沒什么區(qū)別，使用<script/>進行引入即可。如下面的參考語法：
<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>注意：在調(diào)用?getData?或任何其他函數(shù)之前，必須等待圖像完全加載。否則它不會起任何作用。 可以通過在?window.onLoad?函數(shù)上運行EXIT提取方法來實現(xiàn)此等待。或者在圖像自己的?onLoad?函數(shù)上。 對于 jQuery 用戶，請注意您不能（可靠地）為此使用 jQuery 的?ready?事件。因為它會在加載圖像之前觸發(fā)。 您可以使用 $(window).load() 代替 $(document.ready()（請注意，exif-js 不依賴于 jQuery 或任何其他外部庫）。
四、多場景展示數(shù)據(jù)獲取
1、原始圖片直接獲取
? ? ? 這里演示直接獲取網(wǎng)頁上一張圖片的附屬信息，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 讀取圖像的原始數(shù)據(jù)的功能擴展。在現(xiàn)在的應(yīng)用中，會存在將圖片信息進行字符流化的，因此需要對字符流化的數(shù)據(jù)也進行加載。示例代碼如下：
document.getElementById("base64test").onclick = function() {
var image = new Image();
image.onload = function() {
EXIF.getData(image, function() {
alert(EXIF.pretty(this));
});
};
image.src = "";//base64str
}
?注意：?使用設(shè)備（如相機、手機、攝像頭等）拍攝的照片進行測試，這樣照片才有 EXIF 數(shù)據(jù)。
?3、文件上傳的方式加載
? ? ? ?Exif.js同時也支持使用文件上傳的方式對圖片的信息進行加載。其原理和第一種的方式幾乎是一樣的。所以這里展示一下示例頁面吧。
?五、總結(jié)
? ? ? ? 以上就是今天要講的內(nèi)容，本文簡單介紹了exif.js的基礎(chǔ)知識，然后介紹了如何在html頁面中集成exif.js,其次重點說明了3種常用的使用場景，有圖有真相，通過示例運行的方式來講解exif.js的具體使用案例。不過需要說明的是，exif.js確實是有缺陷的，它只能解決圖片的附加信息讀取，而且通常不會在前臺進行信息讀取，因為一般我們會在后臺進行圖片的處理。在處理的過程當(dāng)中，就可能對附屬信息盡心修改，因此有可能造成信息的缺失，所以在實際應(yīng)用過程中，請各位根據(jù)需求來選擇使用。
? ? ? ?文章的最后，依然要祝IT圈的小伙伴們，節(jié)日快樂。祝大家都能擁抱生活，擁抱快樂?！八懔π聲r代·開源創(chuàng)未來”，在這里也祝CSDN2022程序員節(jié)系列活動，圓滿成功。文章來源：http://www.zghlxwxcb.cn/news/detail-829380.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-829380.html
到了這里，關(guān)于1024程序員節(jié)帶你玩轉(zhuǎn)圖片Exif信息獲取之JavaScript的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
