не проверить пиксель изображения перед загрузкой изображения? - PullRequest
Новая
       1

не проверить пиксель изображения перед загрузкой изображения?

0 голосов
/ 20 марта 2020

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

Это мой HTML код 

    <!DOCTYPE html>
<html>
<head>
    <title>Img Upload</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <section>
        <div class="container">
            <p>Hello</p>
            <input type='file' />
            <br>
            <img id="myImg" src="#" alt="Upload Image" height=200 width=200>
        </div>
    </section>
</body>


<!-- Js File -->
<script type="text/javascript" src="D:\Practice\imgUpload\script.js"></script>

</html>

здесь мой JS код 

    window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
     if (this.files && this.files[0]) {
          var img = document.querySelector('img');  // $('img')[0]
          img.src = URL.createObjectURL(this.files[0]); // set src to blob url

            img.onload = function() {
            // var width = img.naturalWidth,
            //     height = img.naturalHeight;

            // window.URL.revokeObjectURL( img.src );
            var width = img.width;
            var height = img.height;
            if( width == 100 && height == 100 ) {
                imageIsLoaded;
            }
            else {
                alert ("add proper pixel image");
            }
         };           
      }
  });
});

function imageIsLoaded() { 
  alert(this.src);  // blob url
  // update width and height ...
}

после попытки использования вышеуказанного кода он предупреждает, что ваше изображение не в правильном пикселе, а после окно предупреждения закрыть изображение загружено. Просто: я хочу добавить изображение, если пиксель совпадает, иначе оно не будет добавлено в DOM

1 Ответ

0 голосов
/ 20 марта 2020

Есть несколько проблем с вашим кодом:

  1. Вы должны получить доступ к img.naturalWidth и img.naturalHeight, если вам нужен доступ к собственному размеру пикселя изображения. img.width и img.height возвращает размер изображения в соответствии с вашей разметкой: в данном случае это 200, что неверно.
  2. При вызове функции imageIsLoaded запомните круглые скобки в конце, например imageIsLoaded()
  3. Если вам нужен доступ к элементу изображения в функции, вам нужно передать его как arugment, то есть imageIsLoaded(img). Затем в объявлении функции выполните function imageIsLoaded(img), чтобы в области действия функции вы имели доступ к загруженному изображению.

Чтобы управлять отображением / скрытием изображения, вы можете просто установить его на display: none по умолчанию и установите его на display: block в функции imageIsLoaded().

См. Пример ниже: 

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
    if (this.files && this.files[0]) {
      var img = document.querySelector('img'); // $('img')[0]
      img.src = URL.createObjectURL(this.files[0]); // set src to blob url

      img.onload = function() {
        var width = img.naturalWidth;
        var height = img.naturalHeight;
        if (width == 100 && height == 100) {
          imageIsLoaded(img);
        } else {
          console.log("add proper pixel image");
          img.style.display = 'none';
        }
      };
    }
  });
});

function imageIsLoaded(img) {
  img.style.display = 'block';
  console.log(img.src);
}
<div class="container">
  <p>Hello</p>
  <input type='file' />
  <br>
  <img id="myImg" src="" alt="Upload Image" height="200" width="200" style="display: none;">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...