Проверьте размеры изображения перед загрузкой

Question

Мне нужно проверить размер изображения, прежде чем принимать загрузку, см. Код ниже.

По какой-то причине параметр «проверка» не был установлен по желанию, и функция checkImage всегда возвращает false.

форма элемент ...

<input type="file" name="bg_image" id="bg_image" accept=".jpg, .png, .gif" /> 

Метод проверки JQuery, правила и сообщения ...

jQuery.validator.addMethod("check_size",checkImage); 

function runFormValidation() { 
    var $myForm= $('#reg-form').validate({ 
     rules: { 
      bg_image: { 
       check_size: 720 
      }, 
     }, 
     messages: { 
      bg_image: { 
       check_size: 'Image Dimension MUST be more than 720px*720px.' 
      }, 
     }, 
    }); 
}; 

Реальная функция checkImage ...

function checkImage(value, element, min_size) 
{ 
    var check = 0; 
    if (typeof (element.files) != "undefined") { 
     var reader = new FileReader(); 
     reader.readAsDataURL(element.files[0]); 
     reader.onload = function (e) { 
      var image = new Image(); 
      image.src = e.target.result; 
      image.onload = function() { 
       var height = this.height; 
       var width = this.width; 
       if (height < min_size || width < min_size) 
        { check=1; } 
       else { check=2; } 
      }; 
     } 
    } 
    if (check==2) { return true; } // Doesn't Work - "check" didn't get set as I wish 
    return false; 
}; 

Answer 1

значение «check» устанавливается после загрузки изображения, поэтому if (check == 2) выполняется до того, как значение будет установлено.

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

Вам следует подождать с возвратом значения до тех пор, пока вы не получите требуемое значение, то есть возврат должен произойти в функции image.onload.

(как я не могу пока комментировать, я продолжать добавлять на этот ответ ...)

Не полный ответ, но в комментариях, что должно быть сделано как-то

function checkImage(value, element, min_size) 
{ 
    var check = 0, 
     returnValue; 
    if (typeof (element.files) != "undefined") { 
     var reader = new FileReader(); 
     reader.readAsDataURL(element.files[0]); 
     reader.onload = function (e) { 
      var image = new Image(); 
      image.src = e.target.result; 
      image.onload = function() { 
       var height = this.height; 
       var width = this.width; 
       if (height < min_size || width < min_size) 
        { returnValue = false; } 
       else { returnValue = true; } 
      }; 
     } 
     /* as long as returnValue === undefined, do nothing, else 
      return returnValue*/ 
    } else { 
     return false; 
    } 
}; 

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

Answer 2

обновляя свою функцию с консоли протоколирования ...

function checkImage(value, element, param) 
{ 
    var check = 0; 
    if (typeof (element.files) != "undefined") { 
     var reader = new FileReader(); 
     reader.readAsDataURL(element.files[0]); 
     reader.onload = function (e) { 
      var image = new Image(); 
      image.src = e.target.result; 
      image.onload = function() { 
       var height = this.height; 
       var width = this.width; 
       console.log("Print dimension : " + height + " X " + width); 
       if (height < 720 || width < 720) 
        { check=1; console.log("inside check = 1"); } 
       else { check=2; console.log("inside check = 2"); } 
      }; 
     } 
    } 
    console.log("outside check value = " + check); 
    if (check==2) { return true; } 
    return false; 
}; 

Когда я проверяю с небольшим размером изображения, здесь последовательность лог консоли ...

VM1207:149 outside check value = 0 
VM1207:142 Print dimension : 498 X 696 
VM1207:144 inside check = 1 

Просто, чтобы сделать его более полный, следующий код (с возвратом в image.onload) также не работал ...

function checkImage(value, element, param) 
{ 
    var check = 0; 
    if (typeof (element.files) != "undefined") { 
     var reader = new FileReader(); 
     reader.readAsDataURL(element.files[0]); 
     reader.onload = function (e) { 
      var image = new Image(); 
      image.src = e.target.result; 
      image.onload = function() { 
       var height = this.height; 
       var width = this.width; 
       console.log("Print dimension : " + height + " X " + width); 
       if (height < 720 || width < 720) 
        { check=1; console.log("inside check = 1"); return false; } 
       else { check=2; console.log("inside check = 2"); return true; } 
      }; 
     } 
    } 
    // console.log("outside check value = " + check); 
    // if (check==2) { return true; } 
    // return false; 
}; 

Итак, как я могу сделать «проверку» установленным до того, как я вернусь к функции ???