javascript - 检查选定的图像尺寸并在超出范围时发出警报

Question

我有一个显示所选图像以及图像宽度和高度的功能。如果图像尺寸大于 390x390，我想检查以提醒。我已经标记了我认为应该进行尺寸检查的地方，我可能是错的。但无论如何它都不起作用。

如果有人有空，请他们看看我应该如何检查尺码。

非常感谢您的宝贵时间。

我的脚本:

window.URL = window.URL || window.webkitURL;
var elBrowse = document.getElementById("image_field"),
elPreview = document.getElementById("preview2"),
useBlob = false && window.URL; // `true` to use Blob instead of Data-URL

function readImage (file) {
  var reader = new FileReader();
  reader.addEventListener("load", function () {
    var image = new Image();
    image.addEventListener("load", function () {
      var imageInfo = '<br><br>Your selected file size is<br>  Display width ' +
      image.width + ', Display height ' + 
      image.height + ' ' + '';


      elPreview.appendChild( this );
      elPreview.insertAdjacentHTML("beforeend",  imageInfo +'<br>');
    });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
    if (useBlob) {
      window.URL.revokeObjectURL(file); 
    }
  });
  reader.readAsDataURL(file);
}

elBrowse.addEventListener("change", function() {
  var files = this.files;
  var errors = "";
  if (!files) {
    errors += "File upload not supported by your browser.";
  }
  if (files && files[0]) {
    for(var i=0; i<files.length; i++) {
      var file = files[i];
      if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
        readImage( file );
      } else {
        errors += file.name +" Unsupported Image extension\n";  
      }

      // SOMETHING LIKE THIS 
      if( (image.width < 390 && image.height < 390) .test(file.name) ) {

        readImage( file ); 
      } else {
        errors += file.name +" Selected image is to small\n";  
      }
      // END
    }
  }
  if (errors) {
    alert(errors); 
  }
});

Answer 1

所以你需要将检查转移到事件监听器，因为这是你可以知道图像分辨率的第一个地方这里没有错误列表，所以你需要稍微修改一下，但你可以从这里开始:

window.URL = window.URL || window.webkitURL;
var elBrowse = document.getElementById("image_field"),
elPreview = document.getElementById("preview2"),
useBlob = false && window.URL; // `true` to use Blob instead of Data-URL

function readImage (file) {

  var reader = new FileReader();
  reader.addEventListener("load", function () {
    var image = new Image();

    image.addEventListener("load", function () {
        if(image.width <= 390 && image.height <= 390)
        {
        var imageInfo = '<br><br>Your selected file size is<br>  Display width ' +
        image.width + ', Display height ' + 
        image.height + ' ' + '';


        elPreview.appendChild( this );
        elPreview.insertAdjacentHTML("beforeend",  imageInfo +'<br>');
        } else {
             alert ( file.name +" Selected image is to big\n");  
        }
    });
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
    if (useBlob) {
      window.URL.revokeObjectURL(file); 
    }
  });
  reader.readAsDataURL(file);
}

elPreview.addEventListener("change", function() {
var files  = this.files;
var errors = "";
if (!files) {
  errors += "File upload not supported by your browser.";
}
if (files && files[0]) {
  for(var i=0; i<files.length; i++) {
  var file = files[i];
  if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {

        readImage( file ); 

  } else {
    errors += file.name +" Unsupported Image extension\n";  
  }

  }
}
if (errors) {
 alert(errors); 
}
});

对于文件变量(首先你打算检查尺寸，你只能根据文件大小 - 以字节为单位)