Wie kann man die Bildgröße (Höhe und Breite) mit JavaScript ermitteln?

Question

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

Answer 1

Angenommen, wir wollen die Bildabmessungen von <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.naturalWidth y el.naturalHeight wird uns die natürliche Dimensionen die Abmessungen der Bilddatei.

Layout Abmessungen

el.offsetWidth y el.offsetHeight liefert die Abmessungen, mit denen das Element im Dokument dargestellt wird.

Answer 2

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

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

Answer 3

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

Ich habe festgestellt, dass die folgenden Angaben, wie von einigen vorgeschlagen, nicht korrekt sind:

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

Schlussfolgerung:

Utilice img , nicht this , in onload Funktion.

Answer 4

Ok Leute, ich denke, ich habe den Quellcode verbessert, um das Bild laden zu können, bevor ich versuche, seine Eigenschaften herauszufinden, sonst wird '0 * 0' angezeigt, weil die nächste Anweisung aufgerufen worden wäre, bevor die Datei in den Browser geladen wurde. 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']);
}

Answer 5

Mit jQuery Bibliothek-

Utilice .width() y .height() .

Mehr in jQuery Breite y 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>