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

Gibt es JavaScript- oder jQuery-APIs oder -Methoden, um die Abmessungen eines Bildes auf der Seite abzurufen?

Sie können das Bild programmgesteuert abrufen und die Abmessungen mit Javascript überprüfen ...

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

Dies kann nützlich sein, wenn das Bild nicht Teil des Markups ist.

clientWidth und clientHeight sind DOM-Eigenschaften, die die aktuelle Größe der inneren Dimensionen eines DOM-Elements im Browser anzeigen (ohne Rand und Rand). Im Fall eines IMG-Elements erhält dies die tatsächlichen Abmessungen des sichtbaren Bildes.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

Außerdem (zusätzlich zu den Antworten von Rex und Ian) gibt es:

imageElement.naturalHeight

und

imageElement.naturalWidth

Diese geben die Höhe und Breite der Bilddatei selbst an (und nicht nur das Bildelement).

Wenn Sie jQuery verwenden und Bildgrößen anfordern, müssen Sie warten, bis sie geladen werden, da sonst nur Nullen angezeigt werden.

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

Ich denke, ein Update dieser Antworten ist nützlich, da eine der am besten bewerteten Antworten die Verwendung vorschlägt clientWidth bewerteten und clientHeight vorschlägt, was meiner Meinung nach mittlerweile veraltet ist.

Ich habe einige Experimente mit HTML5 durchgeführt, um festzustellen, welche Werte tatsächlich zurückgegeben werden.

Zunächst habe ich ein Programm namens Dash verwendet, um einen Überblick über die Image-API zu erhalten. Es gibt an, dass heightund widthdie gerenderte Höhe / Breite des Bildes sind und dassnaturalHeight und naturalWidthdie intrinsische Höhe / Breite des Bildes sind (und nur HTML5 sind).

Ich habe ein Bild eines schönen Schmetterlings aus einer Datei mit einer Höhe von 300 und einer Breite von 400 verwendet. 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 diesen HTML-Code mit Inline-CSS für Höhe und Breite verwendet.

<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 habe dann den HTML-Code wie folgt geändert:

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

dh Verwenden von Höhen- und Breitenattributen anstelle von Inline-Stilen

Ergebnisse:

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

/*Actual Rendered size*/     90                  115

Ich habe dann den HTML-Code wie folgt geändert:

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

dh sowohl Attribute als auch CSS verwenden, um zu sehen, welche Vorrang haben.

Ergebnisse:

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

/*Actual Rendered size*/    120                  150

Mit JQuery gehen Sie folgendermaßen vor:

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

Alle anderen haben vergessen, dass Sie die Bildgröße vor dem Laden nicht überprüfen können. Wenn der Autor alle veröffentlichten Methoden überprüft, funktioniert dies wahrscheinlich nur auf localhost. Da jQuery hier verwendet werden kann, denken Sie daran, dass das Ereignis 'ready' ausgelöst wird, bevor Bilder geladen werden. $ ('# xxx'). width () und .height () sollten bei einem Onload-Ereignis oder höher ausgelöst werden.

Sie können dies nur mit einem Rückruf des Ladeereignisses tun, da die Größe des Bildes erst bekannt ist, wenn das Laden tatsächlich abgeschlossen ist. So etwas wie der Code unten ...

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

Mit jQuery library-

Verwenden Sie .width()und .height().

Mehr in jQuery-Breite und jQuery-Höhe .

Beispiel Code-

$(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 Leute, ich denke, ich habe den Quellcode verbessert, damit das Bild geladen werden kann, bevor versucht wird, seine Eigenschaften herauszufinden. Andernfalls wird '0 * 0' angezeigt, da die nächste Anweisung aufgerufen worden wäre, bevor die Datei geladen wurde der Browser. Benötigt 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']);
}

Angenommen, wir möchten Bildabmessungen von erhalten <img id="an-img" src"...">

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

Natürliche Dimensionen

el.naturalWidthund el.naturalHeighterhalten wir die natürlichen Dimensionen , die Dimensionen der Bilddatei.

Layoutabmessungen

el.offsetWidthund el.offsetHeighterhalten die Abmessungen, mit denen das Element im Dokument gerendert wird.

Bevor Sie die reale Bildgröße verwenden, sollten Sie das Quellbild laden. Wenn Sie das JQuery-Framework verwenden, können Sie auf einfache Weise eine echte Bildgröße erhalten.

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

Diese Antwort war genau das, wonach ich gesucht habe (in jQuery):

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

Sie können eine einfache Funktion wie die folgende ( imageDimensions()) haben, wenn Sie keine Angst haben, Versprechen zu verwenden .

// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
    const img = new Image()

    // the following handler will fire after the successful parsing of the image
    img.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = img
        resolve({ width, height })
    }

    // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
    img.onerror = () => {
        reject('There was some problem with the image.')
    }
    
    img.src = URL.createObjectURL(file)
})

// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
    const [file] = files
 
    try {
        const dimensions = await imageDimensions(file)
        console.info(dimensions)
    } catch(error) {
        console.error(error)
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>

JQuery Antwort:

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

Dachte, dies könnte für einige hilfreich sein, die 2019 Javascript und / oder Typescript verwenden.

Ich fand Folgendes, wie einige vorgeschlagen haben, falsch:

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

Das ist richtig:

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

Fazit:

Verwenden Sie imgnicht thisin onloadFunktion.

Vor kurzem hatte ich das gleiche Problem für einen Fehler im Flex-Schieberegler. Die Höhe des ersten Bildes wurde aufgrund der Ladeverzögerung kleiner eingestellt. Ich habe die folgende Methode zur Lösung dieses Problems ausprobiert und es hat funktioniert.

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

Dies gibt Ihnen die Höhe in Bezug auf die von Ihnen eingestellte Breite anstelle der ursprünglichen Breite oder Null.

Sie können auch verwenden:

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

Nicky De Maeyer fragte nach einem Hintergrundbild; Ich bekomme es einfach aus dem CSS und ersetze 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()));
}

Sie können die Eigenschaft onload handler anwenden, wenn die Seite in js oder jquery wie folgt geladen wird: -

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

 });

Sie können einfach so testen.

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

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

Es ist wichtig, die vom Browser interpretierte Einstellung aus dem übergeordneten div zu entfernen. Wenn Sie also die tatsächliche Bildbreite und -höhe wünschen, können Sie diese einfach verwenden

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

Dies ist ein Beispiel für ein TYPO3-Projekt von mir, bei dem ich die realen Eigenschaften des Bildes benötige, um es mit der richtigen Beziehung zu skalieren.

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 das hilfreich. :) :)

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

Dies funktioniert für die Vorschau und das Hochladen mehrerer Bilder. wenn Sie für jedes der Bilder einzeln auswählen müssen. Dann kopieren und in alle Vorschaubildfunktionen einfügen und validieren !!!

Vor dem Erfassen der Elementattribute sollte die Dokumentseite geladen sein:

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

Übergeben Sie einfach das img-Dateiobjekt, das vom Eingabeelement erhalten wird, wenn wir die richtige Datei auswählen. Es gibt die Netzhöhe und -breite des Bildes an

function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}