EXIF.Js: reading the image EXIF information

First, what EXIF ​​yes?

EXIF (Exchangeable Image File) is the "Exchangeable Image File" abbreviation, which contains specifically for digital camera photos and custom metadata, you can record digital photo shooting parameters, thumbnails, and other attribute information, in simple terms, Exif information is a set of shooting parameters embedded in the JPEG / TIFF image file format should be noted that EXIF ​​information does not support png, webp and other image formats. (Recommended own test of time, now take a picture, the location information is turned on, so get the complete EXIF ​​information)

In the scaffolding use:

npm install exif-js --save

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

app.vue Code:

(Note that here I was in the beginning with nextTick mounted hooks as well as a delay, because EXIF.js is asynchronous, but it seems not necessarily hundred percent successful, so here is added to the picture click callback)

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

View Code

 

 Information obtained about the case, including the identification EXIF, TIFF information and GPS information

All relevant information as well as other API EXIF, please see the front-end development warehouse

(There is a very strange place, time to check the EXIF ​​information found therein oriention property can be used to rotate the picture, but other people's property is only 1,6,8,3 oriention these values, I was 0 ...)