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回答が正しい。画像はまだブラウザにロードされない場合がありますので、あなたが0の幅と高さを取得している

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

：あなたはjQueryのを使用している場合しかし、あなたはこれを使用することができます。

Answer 4

イメージの幅と高さを得るために、imgの小さなオンロード関数を記述する必要があります。それに応じてそれを操作することができます。

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/ これは役に立ちます。