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

Antworten:

792

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.

Josh Stodola
quelle
4
@ blo0p3r - das Bild muss vorher nicht in das DOM geladen werden. Es lädt das Bild und löst die Onload aus, um die Abmessungen anzugeben. Übrigens - Beste Antwort hier !!
Vik
Ich wünschte, Sie könnten dies auch mit einem XMLHttpRequest-Objekt tun.
PHearst
Wie kann ich diesen Code für mehrere (eine Reihe von) Bilder verwenden? Müsste es wahrscheinlich mit der besten Antwort von hier kombinieren : stackoverflow.com/questions/4288759/… ?
Kozuch
Lösung für mehrere Bilder hier: stackoverflow.com/questions/19269834/…
Kozuch
2
img.onerror = function () {alert (0); // Handler nicht gefunden}
Limitless isa
437

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;
Rex M.
quelle
33
@ Nicky genau richtig. Es gibt die Abmessungen des Bildes an, wie es in diesem Fall gerendert wird .
Rex M
8
@ Mat-Visual $.fn.widthund $.fn.height.
Yckart
202
Die richtige Antwort ist, img.naturalWidth und img.naturalHeight
Octopus
5
document.getElementByIdist länger zu tippen, aber 10 mal schneller als $('#...')[0].
Bfontaine
17
@ RexM Auf Chrome 35 ist es 16-mal schneller: jsperf.com/document-getelementbyid-vs-jquery/5
bfontaine
335

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

olliej
quelle
15
Dies wird jetzt in IE9 und allen modernen Webbrowsern unterstützt.
Aaron
Erhalte 0x0, wenn das Laden des Bildes noch nicht abgeschlossen ist.
Brk
1
Ich verwende Chrome und dies funktioniert nur, wenn sich die Bildgröße im Dom nach dem Laden der Seite nicht ändert.
Jonathan Czitkovics
Ja ... das ist was ich tue. Und danach, wenn "natürliche Breite" oder Höhe als NaNs zurückkehren, kehre ich zur anderen Methode aus der vorherigen Antwort zurück (erhalte das Bild erneut als neues Bild () und erhalte dann seine Breite und Höhe während des Onload-Ereignisses. Langsamer, aber auf diese Weise funktioniert es in älteren Browsern wie IE8.
Randy
falls Sie mehr über die Browserunterstützung erfahren
ulmer-morozov
109

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());
    });
});
mrtsherman
quelle
Ist im Load Handler immer Breite und Höhe verfügbar?
Anders Lindén
@ AndersLindén - siehe die Tinte, die Akseli für das Ladeereignis hinzugefügt hat. Es gibt einen speziellen Abschnitt, der Bildern gewidmet ist. Die technische Antwort lautet "Nein", aber in der Praxis hatte ich nie ein Problem mit unseren Websites, die diese Methode verwenden.
Mrtsherman
Aber wenn die technische Antwort nein ist, ist es unbrauchbar? Ist es nicht?
Anders Lindén
Ist es möglich, die Bildattribute vor dem Laden abzurufen?
nein nein
98

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
paulo62
quelle
1
Warum ist clientHeight Ihrer Meinung nach veraltet?
Cactux
64

Mit JQuery gehen Sie folgendermaßen vor:

var imgWidth = $("#imgIDWhatever").width();
Ian Suttle
quelle
63
Und wenn das Bild noch nicht geladen wurde?
James Westgate
11
und wenn sich das bild in der hintergrund-eigenschaft des div befindet? :)
NDM
3
@JamesWestgate Wenn das Bild noch nicht geladen wurde, kann die tatsächliche Größe nicht ermittelt werden. Sie können jedoch versuchen, die Attribute widthund heightdes imgElements zu lesen .
Tim
@ Tim Sie können es im Hintergrund laden und wenn es geladen ist, können Sie seine Dimensionen haben
Odys
26

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.

Denker
quelle
9
Wenn Sie einen aktualisierten Code veröffentlichen, werden Sie möglicherweise positiv bewertet und erhalten sogar ein begehrtes Umkehrabzeichen!
James Westgate
1
@ Thinker, pls bieten Ihre Lösung, weil Ihre Analyse korrekt scheint.
a20
5
Dies ist keine Antwort. Nur ein Kommentar zu den anderen Antworten.
Jeffdill2
20

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';
Lee Hesselden
quelle
1
In jquery können Sie dafür $ .proxy verwenden.
Jochem Van Der Spek
9

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>

Abrar Jahin
quelle
8

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']);
}
claudio
quelle
8

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.

Saneef
quelle
4
Stimmen Sie einfach die vorhandenen Antworten ab, die hilfreiche Inhalte liefern. Kopieren Sie nicht von mehreren in eine neue. Sie duplizieren dann nur den Inhalt.
TylerH
7

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())
})
sub
quelle
7

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

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

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>

Neurotransmitter
quelle
3

JQuery Antwort:

$height = $('#image_id').height();
$width  = $('#image_id').width();
Eli Geske
quelle
3

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.

Brian
quelle
img.src oben hat einen Tippfehler, sollte "nicht: Ich habe versucht, dies zu bearbeiten, kann aber nicht, weil:" Änderungen müssen mindestens 6 Zeichen sein;
Gibt es
Vielen Dank an user2677034 für die Benachrichtigung. Das habe ich nicht gesehen. Ich werde Apples Tastatur beschuldigen. Nur ein Scherz ... Es war wahrscheinlich meine Schuld. ; P
Brian
2

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.

Muhammed Basilikum
quelle
1

Sie können auch verwenden:

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

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()));
}
Hraban
quelle
Ich habe die Verwendung von Regexp für die Verwendung von jQuery nie verstanden. Da jQuery das Attribut für Sie normalisiert, kommen Sie damit gut zurecht s.substr(4,s.length-5), es ist zumindest augenschonender;)
Jonas Schubert Erlandsson
1

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;

 });
Harkamal Singh
quelle
1

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>
cloudrain21
quelle
0
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 ...
user3496915
quelle
0

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.

Rogoit
quelle
0
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. :) :)

DHA
quelle
0
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 !!!

Daniel Adenew
quelle
0

Vor dem Erfassen der Elementattribute sollte die Dokumentseite geladen sein:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}
中国 程序员
quelle
0

Ü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;
}
itsCodingThing
quelle