如何在javascript中檢查高度和寬度圖像

Question

如何在javascript中檢查高度和寬度圖像？

我的代碼是：

jQuery.validator.addMethod('allowdimensions', function (value, element, params) {
    if (element.files.length < 1) {
        // No files selected
        return true;
    }
    if (!element.files || !element.files[0].size) {
        // This browser doesn't support the HTML5 API
        return true;
    }
    var minWidth = parseInt(params['minwidth'], 10);
    var maxWidth = parseInt(params['maxwidth'], 10);
    var minHeight = parseInt(params['minheight'], 10);
    var maxHeight = parseInt(params['maxheight'], 10);
    var image = {
        width: 0,
        height: 0
    };
    var reader = new FileReader();
    var img = new Image();
    reader.addEventListener("load", function () {
        img.src = reader.result;
    }, false);

    reader.readAsDataURL(element.files[0]);

    return image.width >= minWidth &&
        image.width <= maxWidth &&
        image.height >= minHeight &&
        image.height <= maxHeight;
});

image.width和image.height始終是0 ; 讀取圖像會發生延遲。我不知道如何在返回輸出之前讀取圖像。

Answer 1

試試這樣。

reader.onload = function (e)
{
image.src = e.target.result;

image.onload = function ()
{
      // access image size here 
      if (this.width < 100 && this.height < 100)
      {
       // alert("To Small Image or your message"); 
      }
  }
}

Answer 2

我對您在這里嘗試做的事情感到有些困惑。 但是試試這個： https : //jsfiddle.net/3dqnc1wa/1/

jQuery：

$("document").ready(function() {
  var imageWidth = $("img").width();
  var imageHeight = $("img").height();
  $("#dims").html("Width: " + imageWidth + " x Height: " + imageHeight)
  if(imageWidth >= 400 && imageHeight >= 200) {
    $("#test").html("It's equal to or wider than 400px and equal to or higher than 200px");
  } else if(imageWidth <= 399 && imageHeight <= 199) {
    $("#test").html("It's smaller than or equal to 399px wide and shorter than of equal to 199px");
  }
;});

HTML：

<img src="http://placehold.it/350x150">
<div id="dims">
</div>
<div id="test">
</div>

我使用了.width()和.height()並將它們存儲在變量（ imageWidth / imageHeight ）中，然后用一些條件檢查它們。

Answer 3

Punit 答案是正確的。 但是如果你使用 jQuery 你可以使用這個：

$('#image_id').load(function(){
    var Img_Width = $(this).width();
    var Img_Height = $(this).height();
});

您得到 0 寬度和高度，因為圖像可能尚未加載到瀏覽器中。

Answer 4

您需要為 img 編寫一個小的 onload 函數，以獲取圖像的寬度和高度，然后您可以相應地對其進行操作。

var reader  = new FileReader();
  var img = new Image();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
    img.src=reader.result;
  }, false);

    reader.readAsDataURL(file);
  img.onload = function() {
  //alert(this.width + 'x' + this.height);
  image.width=this.width;
  image.height=this.height;
}

這里這個。 width 是圖像的寬度， this.height 是高度。 獲得圖像的高度和寬度后，將其存儲在圖像 json 中，並將它們與 maxHeight 和 maxWidth ，minHeight 和 minWidth 進行比較。

這是小提琴https://jsfiddle.net/AnonymousKB07/kn0h5tm2/3/希望這會有所幫助。