Показать изображение EXIF ​​для пользователя с VueJS - PullRequest
Новая
       32

Показать изображение EXIF ​​для пользователя с VueJS

1 голос
/ 28 января 2020

Я работаю с Exif. js и VueJS для моего проекта. но у меня проблема. когда я хочу показать информацию изображения на экране, это не работает. но это работает на консоли браузера. Как показать информацию с тегом

в html для пользователей? Вот мой код: 

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

1 Ответ

0 голосов
/ 28 января 2020

у вас есть проблема с данными и реактивностью. Здесь понятия из руководства vue.

"Из-за ограничений современного JavaScript (и отказа от Object.observe) Vue не может обнаружить добавление или удаление свойства. Vue выполняет процесс преобразования getter / setter во время инициализации экземпляра, свойство должно присутствовать в объекте данных, чтобы Vue преобразовало его и сделало его реактивным. "

Значения данных должны быть функцией для повторного использования, и вам нужно объявить переменную для применения значений exif и быть в состоянии показать их обновленными на экране

Дополнительно, в следующий раз включите вашу html часть, иногда ошибки будут.

Еще одной распространенной проблемой, начинающейся с vue, является использование этого, ну, это внутри exif, это не то же самое, что в vue. Простой способ обойти проблему 'this' - сохранить vue this во временной переменной (пусть vm = this) и использовать их внутри кода exif.

Просто так: 

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

Вот пример, который вы используете из jsfiddle fixed

...