Show Image EXIF for User with VueJS

Question

I work with Exif.js and VueJS for my project. but i have problem. when i want show information of image on screen it doesn't work. but it work on Browser Console. How i show information with

tag in html for Users? Here is my code:

<script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Vue exif meta info getter',
        DateImage: "DateTimeDigitized"
      },
      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)
              console.log("date image jadid : " + this.DateImage);
            })
          } else {
            console.log(`it's not image`)
          }
        },
        getEI() {
         var old = console.log;
          var logger = document.getElementById('log');
          console.log = function (message) {
            if (typeof message == 'object') {
              logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
            } else {
              logger.innerHTML += message + '<br />';
            }
          }
        }
      }
    })
  </script>

score 0 · Answer 1 · edited Jul 16 '22 at 05:46

you have an issue with data and reactivity. Here the concepts from the vue guide.

"Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive."

Means data should be a function for reusability and you need declare a variable for apply the exif values and be capable of show them updated in the screen

Extra, next time include your html part sometimes the errors will be there.

A extra common problem starting with vue is the use of this, well this inside exif it's not the same to this in vue. An easy way for bypass 'this' issue is save the vue this in a temporary variable (let vm = this) and use them inside the exif code.

Just like that:

<template>
  <!-- exifs is an object, you can print direct a value 
       if you know their key (exifs.Name) or you can iterate 
       with v-for and show all the values -->
  <p v-for="ex in exifs">
    {{ex}}
  </p>
</template>

    <script>
        const app = new Vue({
          el: '#app',
          data() {
            return {
              message: 'Vue exif meta info getter',
              DateImage: "DateTimeDigitized",
              exifs: null
            }
          },
          components: {
            'picture-input': PictureInput
          },
          methods: {
            onChange(image) {
              console.log('onChange!')
              if (image) {
                let vm = this
                EXIF.getData(this.$refs.pictureInput.file, function () {
                  vm.exifs = this
                })
              } else {
                console.log(`it's not image`)
              }
            },
            getEI() {
             var old = console.log;
              var logger = document.getElementById('log');
              console.log = function (message) {
                if (typeof message == 'object') {
                  logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
                } else {
                  logger.innerHTML += message + '<br />';
                }
              }
            }
          }
        })
      </script>

Here the example you use from jsfiddle fixed

Thank you for your response. but if i want to show custom value of EXIF for Example Time and Model now what can i do? — S.Mostafa Sayyedi, Jan 29 '20 at 18:13
run one time my code to verify the exifs you mention exist in the image. You will find the exact name of time and model in the exif object . after that you can remove the v-for and call them like {{ exifs.time }} and {{ exifs.model }}. in this way var exifs contain all exifs. you can prevent that declaring time and model in data() and after charge only this two during onchange method, extra you can validate if them exist and show a error msg when not exist — chefjuanpi, Feb 03 '20 at 05:57

Show Image EXIF for User with VueJS

1 Answers1