EXIF.Js：讀取圖片的EXIF信息

首先，EXIF是什么？

EXIF（Exchangeable Image File）是“可交換圖像文件”的縮寫，當中包含了專門為數碼相機的照片而定制的元數據，可以記錄數碼照片的拍攝參數、縮略圖及其他屬性信息，簡單來說，Exif信息是鑲嵌在 JPEG/TIFF 圖像文件格式內的一組拍攝參數，需要注意的是EXIF信息是不支持png,webp等圖片格式的。（建議自己試的時候，現拍一張，把地理位置信息開啟，這樣得到的是完整的EXIF信息）

在腳手架下的使用：

npm install exif-js --save

import EXIF from "exif-js"（main.js、app.vue）

app.vue代碼：

（注意，這里我最開始是在mounted鈎子中配合nextTick還有延時，因為EXIF.js是異步的，但是好像不一定百分百成功，於是就在這里加到了點擊圖片的回調中）

<template>
  <div id="app">
    <div id="nav">
      <img ref="img" @click="callback($event)" id="img" src="./assets/IMG_20190922_082930.jpg"
      />
      <p>{{ imfo }}</p>
    </div>
  </div>
</template>
<script> import EXIF from "exif-js"; export default { data() { return { imfo: {} }; }, methods: { callback(e) { EXIF.getData(e.target, function() { var res = EXIF.getAllTags(this); console.log(res); }); } } }; </script>
<style lang="less"> img { width: 500px; height: 500px;
} #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;
} #nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983;
    } } } </style>

 

 得到的信息大概是這樣的，包括EXIF標識、TIFF信息以及GPS信息

各種相關信息以及EXIF的其他API，請參見 前端開發倉庫

（還有個很奇怪的地方，查EXIF信息的時候發現其中的oriention屬性是可以用來進行圖片的旋轉的，但人家的oriention屬性只有1、6、8、3這幾個值，我的是0...）