Jak uzyskać Rozmiar obrazu (wysokość i szerokość) za pomocą JavaScript?

Możesz programowo pobrać obraz i sprawdzić wymiary za pomocą Javascript...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Może to być przydatne, jeśli obraz nie jest częścią znaczników.

Ponadto (oprócz odpowiedzi Rexa i Iana) jest:

imageElement.naturalHeight

I

imageElement.naturalWidth

Określają wysokość i szerokość samego pliku obrazu (a nie tylko elementu obrazu).

Jeśli używasz jQuery i żądasz rozmiarów obrazów, musisz poczekać, aż się załadują, albo dostaniesz tylko zera.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

Myślę, że aktualizacja tych odpowiedzi jest przydatna, ponieważ jedna z najlepiej głosowanych odpowiedzi sugeruje użycie clientWidth i clientHeight, które moim zdaniem jest teraz przestarzałe.

Zrobiłem kilka eksperymentów z HTML5, aby zobaczyć, które wartości rzeczywiście zwracane.

Po pierwsze, użyłem programu o nazwie Dash, aby uzyskać przegląd interfejsu API obrazów. Oznacza to, że height i width są renderowaną wysokością / szerokością obrazu, a naturalHeight i naturalWidth są wewnętrzną wysokością / szerokością obrazu (i są tylko HTML5).

Użyłam zdjęcia pięknego motyla, z pliku o wysokości 300 i szerokości 400. I ten Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Następnie użyłem tego HTML, z wbudowanym CSS dla wysokości i szerokości.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Wyniki:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Potem zmieniłem HTML na następujący:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

Tj. używanie atrybutów wysokości i szerokości zamiast stylów inline

Wyniki:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

Potem zmieniłem HTML na po:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Tj. używając zarówno atrybutów, jak i CSS, aby zobaczyć, co ma pierwszeństwo.

Wyniki:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Używając JQuery robisz to:

var imgWidth = $("#imgIDWhatever").width();

Wszyscy inni zapomnieli, że nie można sprawdzić rozmiaru obrazu przed załadowaniem. Gdy autor sprawdzi wszystkie opublikowane metody, będzie działać prawdopodobnie tylko na localhost. Ponieważ jQuery może być tutaj używany, pamiętaj, że zdarzenie 'ready' jest wywoływane przed załadowaniem obrazów. $('#xxx').szerokość () i .height() powinna być wywołana w zdarzeniu onload lub później.

Można to zrobić tylko za pomocą wywołania zwrotnego zdarzenia load, ponieważ Rozmiar obrazu nie jest znany, dopóki nie zakończy się wczytywanie. Coś jak poniższy kod...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

With jQuery library-

Użyj .width() i .height().

Więcej w jQuery width i jQuery heigth.

Przykładowy Kod-

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>

Ok chłopaki, myślę, że poprawiłem kod źródłowy, aby móc załadować obraz przed próbą znalezienia jego właściwości, w przeciwnym razie wyświetli się '0 * 0', ponieważ następne polecenie zostałoby wywołane przed załadowaniem pliku do przeglądarki. Wymaga jquery...

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

Przed użyciem rzeczywistego rozmiaru obrazu należy wczytać obraz źródłowy. Jeśli używasz jQuery framework możesz uzyskać rzeczywisty rozmiar obrazu w prosty sposób.

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

Ta odpowiedź była dokładnie tym, czego szukałem (w jQuery):

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

JQuery Odpowiedź:

$height = $('#image_id').height();
$width  = $('#image_id').width();

Po prostu, możesz przetestować w ten sposób.

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

Możesz również użyć:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

Nicky de Maeyer zapytał po obrazku w tle; po prostu dostaję go z css i zamieniam " url ()":

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

Ostatnio miałem ten sam problem z błędem w suwaku flex. Wysokość pierwszego obrazu została ustawiona na mniejszą ze względu na opóźnienie ładowania. Wypróbowałem następującą metodę rozwiązania tego problemu i zadziałało.

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

To da ci wysokość w odniesieniu do szerokości, którą ustawiłeś, a nie oryginalną szerokość lub Zero.

Możesz zastosować właściwość obsługi onload, gdy strona ładuje się w js lub jquery w następujący sposób: -

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

Ważne jest, aby usunąć ustawienia interpretowane przez przeglądarkę z nadrzędnego div. Więc jeśli chcesz mieć rzeczywistą szerokość i wysokość obrazu, możesz po prostu użyć

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

Oto przykład projektu TYPO3, w którym potrzebuję rzeczywistych właściwości obrazu, aby przeskalować go z odpowiednią relacją.

function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

To działa do wielokrotnego podglądu i przesyłania obrazów . jeśli musisz wybrać dla każdego z obrazów jeden po drugim . Następnie skopiuj i wklej do wszystkich funkcji podglądu obrazu i zatwierdź!!!

Przed uzyskaniem atrybutów elementu,strona dokumentu powinna zostać załadowana:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}