Wie bekomme ich die Bildgröße (Höhe und Breite) mit JavaScript?

Auch (neben Rex und IANS Antworten) es ist:

imageElement.naturalHeight

und

imageElement.naturalWidth

Diese geben die Breite und Höhe der Bilddatei selbst (statt nur das Bild-element).

InformationsquelleAutor der Antwort olliej

Denke ich, dass ein update für diese Antworten ist nützlich, weil Sie eine der besten Stimmen, die Antworten schlägt mit clientWidth und clientHeight, die ich denke, ist jetzt obsolet.

Habe ich getan einige Experimente mit HTML5, um zu sehen, welche Werte tatsächlich zurückgegeben.

Zunächst habe ich ein Programm namens Dash, um einen überblick über die Bild-API.
Es besagt, dass height und width sind die gerenderte Höhe/Breite des Bildes und das naturalHeight und naturalWidth sind die intrinsischen Höhe/Breite des Bildes (und HTML5).

Habe ich ein Bild von einem schönen Schmetterling, der von einer Datei mit Höhe 300 und der Breite 400. Und dieses Javascript:

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

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

Dann habe ich diese HTML-mit-inline-CSS für die Höhe und Breite.

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

Ergebnisse:

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

/*Actual Rendered size*/    120                  150

Ich wechselte dann den HTML-Code der folgende:

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

also mit Höhe und Breite Attribute statt inline-styles

Ergebnisse:

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

/*Actual Rendered size*/     90                  115

Ich wechselte dann den HTML-Code der folgende:

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

d.h. die Verwendung beider Attribute und CSS, um zu sehen, welche Vorrang.

Ergebnisse:

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

/*Actual Rendered size*/    120                  150

InformationsquelleAutor der Antwort paulo62

Dem, was alle anderen vergessen haben, ist, dass man nicht überprüfen Bild die Größe, bevor es geladen wird. Wenn der Autor prüft alle gepostet Methoden funktioniert es wohl nur auf dem localhost. Da jQuery könnte hier eingesetzt werden, denken Sie daran, die 'bereit' - Ereignis wird ausgelöst, bevor die Bilder geladen sind. $('#xxx').width() und .Höhe() gefeuert werden sollen, im onload-Ereignis oder später.

InformationsquelleAutor der Antwort Thinker

ok Jungs, ich denke ich habe mich verbessert den Quellcode zu können, lassen Sie das Bild laden, bevor Sie versuchen zu finden, seine Eigenschaften, sonst wird es display '0 * 0', denn die nächste Anweisung aufgerufen wurden, bevor die Datei in den browser geladen. Erfordert 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']);
}

InformationsquelleAutor der Antwort claudio

Diese Antwort war genau was ich suchte (in jQuery):

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

InformationsquelleAutor der Antwort dev101

Einfach, können Sie testen, wie diese.

  <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>

InformationsquelleAutor der Antwort cloudrain21

Nicky De Maeyer fragte nach einem hintergrund Bild, habe ich einfach Holen Sie es aus der css und ersetzen Sie die "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()));
}

InformationsquelleAutor der Antwort Hraban

Kürzlich hatte ich dasselbe Problem für einen Fehler in der flex-slider. Das erste Bild ist die Höhe, die eingestellt wurde kleiner durch das laden verzögern. Ich habe versucht, die folgende Methode für die Lösung dieses Problems, und es hat geklappt.

//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';

Dieser wird Ihnen die Höhe mit Bezug auf die Breite, die Sie angeben, anstatt der ursprünglichen Breite oder Null.

InformationsquelleAutor der Antwort muhammed basil

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.

Dies ist meine Methode, hoffe, dass dies hilfreich. 🙂

InformationsquelleAutor der Antwort DHA

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]);
}

diese Arbeit für mehrere Bild-Vorschau und hochladen . wenn Sie haben, wählen Sie für jedes der Bilder eins nach dem anderen . Dann copy & past in alle Vorschau-Bild-Funktion und überprüfen!!!

InformationsquelleAutor der Antwort danielad