Get image’s EXIF data on Vue.js

less than 1 minute read

I wrote codes get EXIF data of image using Vue.js for liks79 who is my dear friend.

I used vue-picture-input and exif-js. You can confirm EXIF data on browser console.

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-picture-input"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js" async></script>
  <title>Vue exif getter In the browser!</title>
</head>
<body>
  <div id="app">
    <p></p>
    <picture-input ref="pictureInput" @change="onChange"></picture-input>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Vue exif meta info getter'
      },
      components: {
        'picture-input': PictureInput
      },
      methods: {
          onChange (image) {
              console.log('onChange!')
              if (image) {
                  EXIF.getData(this.$refs.pictureInput.file, function() {
                      console.log('image info', this)
                      console.log('exif data', this.exifdata)
                  })
              } else {
                  console.log(`it's not image`)
              }
          }
      }
    })
  </script>
</body>
</html>

Working code on jsfiddle may be helpful.

End!

Tags:

Categories:

Updated:

Leave a comment