Как проверить ориентацию изображения в Angular перед загрузкой изображения

Question

Как проверить ориентацию изображения в Angular перед загрузкой изображения

1

Я просто хочу, чтобы изображение, загружаемое на мой сайт, было портретным или квадратным, и я не хочу обрезать изображение, загружаемое изображение должно быть портретным или квадратным по умолчанию. Я искал номер метода использования сайта/числа, но ни один не работал

знаю, что я пытаюсь этот метод, но он также не работает, потому что он работает асинхронно

если дать ландшафтное изображение в данном коде, он запускается, если он не должен работать, поскольку hasError должен иметь значение true, но не потому, что если условие выполняется до того, как вышеприведенный код может завершиться, что я могу сделать

 let hasError = false;
 image = event.target.files[0];
    if (image) {
      var img = new Image();
      img.src = window.URL.createObjectURL(image);
      img.onload = function () {
        height = img.naturalHeight;
        width = img.naturalWidth;
        console.log(hasError);  // prints false
        if (height < width)  {
           hasError = true; // prints true 
           console.log(hasError);
        }
        window.URL.revokeObjectURL(img.src);
     }
    console.log(hasError); //prints flase
   }
   if(!hasError){
       .... 
   }

Mohit.B 09 янв. 2019, в 17:13

Источник

2

Я считаю, что функция img.onload должна быть определена ДО того, как вы установите img.src , попробуйте это.
Calvin Godfrey 09 янв. 2019, в 15:19
0

Ваша проблема в том, что вы пытаетесь получить доступ к значению hasError до завершения загрузки изображения. img.onload является асинхронным, то есть остальная часть кода будет продолжать работать , а затем , когда изображение загружается функция OnLoad будет выполняться. Ваша проблема не имеет ничего общего с ориентацией изображения, поскольку вы говорите, что он выводит значение true когда изображение имеет альбомную ориентацию.
Archer 09 янв. 2019, в 15:23

Теги:

angular

angular6

javascript

1 ответ

Ещё вопросы

Я считаю, что функция img.onload должна быть определена ДО того, как вы установите img.src , попробуйте это.
Ваша проблема в том, что вы пытаетесь получить доступ к значению hasError до завершения загрузки изображения. img.onload является асинхронным, то есть остальная часть кода будет продолжать работать , а затем , когда изображение загружается функция OnLoad будет выполняться. Ваша проблема не имеет ничего общего с ориентацией изображения, поскольку вы говорите, что он выводит значение true когда изображение имеет альбомную ориентацию.

HDM91 · Accepted Answer · 2019-01-09T14-44-00.000Z

Я думаю, что вы должны создать функцию и перенести проверку изображения в свою функцию и использовать обратный вызов, чтобы узнать, есть ли на изображении ошибка или нет.

var fileInput = document.querySelector('input[type="file"]');
var preview = document.getElementById('preview'); //img tag

previewImage(function(hasError){
  if (!hasError){
    //do something
  }
});

function previewImage(callback){
  fileInput.addEventListener('change', function(e) {
    preview.onload = function() {
      
        height = this.naturalHeight;
        width = this.naturalWidth;
        if (height < width)  {
           callback(true);
        } 
        window.URL.revokeObjectURL(this.src);
        callback(false);
    };

    var url = URL.createObjectURL(e.target.files[0]);
    preview.setAttribute('src', url);
}, false);
}