JavaScript: Bildabmessungen abrufen

94

Ich habe nur eine URL zu einem Bild. Ich muss die Höhe und Breite dieses Bildes nur mit JavaScript bestimmen. Das Bild kann für den Benutzer auf der Seite nicht sichtbar sein. Wie kann ich seine Abmessungen erhalten?

javascript html image JQueeeer
quelle
2
stackoverflow.com/questions/106828/javascript-get-image-height
stecb
1
Tatsächlich ist diese Antwort die einzige, die wirklich richtig ist, da Sie warten müssen, bis das Bild geladen ist.
Schatten-Assistent ist Ohr für Sie

Antworten:

196 
var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;
Shumii
quelle
1
Es sei denn, Sie müssen die Abmessungen synchron erhalten. In diesem Fall müssen Sie nur das Bild in das Dokument einfügen (unter Verwendung einer absoluten Position irgendwo außerhalb des Ansichtsfensters). Die Abmessungen sind dann direkt nach dem Aufruf von document.appendChild () verfügbar.
JustAndrei
1
Warum ist onloadvorher als die URL des Bildes zu setzen?
Ajay Gaur
22
@AjayGaur da onloadist ein Listener, der asynchron aufgerufen wird, wenn das Bild korrekt geladen wird. Wenn Sie den Listener nach dem Festlegen der URL festlegen, wird das Bild möglicherweise geladen, kurz bevor der Code die Einstellung des Onloads selbst erreicht, sodass der Listener nie aufgerufen wird. Wenn Sie sich nach Analogien ein Glas mit Wasser servieren, gießen Sie zuerst das Wasser ein und setzen dann das Glas ein, um es zu füllen? Oder setzen Sie zuerst das Glas ein und gießen dann das Wasser hinein?
Biomorgoth
2
img.naturalWidth und img.naturalHeight ist die richtige Antwort
Kamlesh
Danke @Kamlesh Ich brauchte die natürlichen Dimensionen.
Idaho
42

Mach ein neues Image

var img = new Image();

Stellen Sie die src

img.src = your_src

Holen Sie sich das widthund dasheight

//img.width
//img.height
nc3b
quelle
17
Ich erhalte immer wieder 0 für Breite und Höhe, wobei ich genau diesen Code verwende.
Adam Casey
11
Es scheint, dass das Bild geladen werden muss, was Sinn macht.
Adam Casey
3
zusätzliche Infos - obwohl dies bei mir zum ersten Mal funktionierte, war es zeitweise. Ich denke, das Problem ist, dass das Bild nicht heruntergeladen wurde. Ich habe das Problem behoben, indem ich den Code ausgeführt habe, der die Dimension im Onload-Ereignishandler wie folgt verwendet: img.onload = function () {};
Shumii
3
Dieser Code funktioniert, solange sich das Bild im Browser-Cache befindet. Sobald der Cache ungültig oder gelöscht ist. Es wird nicht funktionieren. Also nicht wirklich zuverlässig.
Bharatesh
2
Das funktioniert nicht, da das Bild noch nicht geladen ist. Das Laden des Bildes erfolgt asynchron, sodass Sie auf das Ladeereignis warten müssen.
user1702401
5

Dies nutzt die Funktion und wartet, bis sie abgeschlossen ist.

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});
David Dunham
quelle
1
Warum sollte diese wiederverwendbare Funktion mit Stundungen herabgestuft werden?!
David Dunham
'nur JavaScript verwenden' und das ist jQuery, denke ich
Apolo
Sie erhalten eine positive Bewertung von mir, obwohl es jQuerry verwendet. Der Ansatz ist, dass es darauf ankommt.
krankuba
2

naturalWidth und naturalHeight

var img = document.createElement("img");
img.onload = function (event)
{
    console.log("natural:", img.naturalWidth, img.naturalHeight);
    console.log("width,height:", img.width, img.height);
    console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
}
img.src = "image.jpg";
document.body.appendChild(img);

// css for tests
img { width:50%;height:50%; }
Bitter blau
quelle
1

wenn Sie eine Bilddatei aus Ihrem Eingabeformular haben. Sie können so verwenden

let images = new Image();
images.onload = () => {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () => result(true);

let fileReader = new FileReader();
fileReader.onload = () => images.src = fileReader.result;
fileReader.onerror = () => result(false);
if (fileTarget) {
   fileReader.readAsDataURL(fileTarget);
}
Raka Adi Nugroho
quelle
0

Ähnliche Fragen, die mit JQuery hier gestellt und beantwortet wurden:

Holen Sie sich die Breite Höhe des Remote-Bildes von der URL

function getMeta(url){
  $("<img/>").attr("src", url).load(function(){
     s = {w:this.width, h:this.height};
     alert(s.w+' '+s.h);      
  }); 
}

getMeta("http://page.com/img.jpg");
Luke Knepper
quelle
0

Holen Sie sich die Bildgröße mit jQuery

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

Holen Sie sich die Bildgröße mit JavaScript

function getMeta(url){   
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

Holen Sie sich die Bildgröße mit JavaScript (moderne Browser, IE9 +)

function getMeta(url){   
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

Verwenden Sie das Obige einfach als: getMeta (" http://example.com/img.jpg ");

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement

Sunny Mahajan
quelle
-3

Mit dem folgenden Code fügen Sie jedem Bild auf der Seite die Höhe und Breite des Bildattributs hinzu.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function addImgAttributes()
{
    for( i=0; i < document.images.length; i++)
    { 
        width = document.images[i].width;
        height = document.images[i].height;
        window.document.images[i].setAttribute("width",width);
        window.document.images[i].setAttribute("height",height);

    }
}
</script>
</head>
<body onload="addImgAttributes();">
<img src="2_01.jpg"/>
<img src="2_01.jpg"/>
</body>
</html>
Testere
quelle
13
Die Frage war, wie man Bildabmessungen erhält, ohne dem Benutzer ein Bild zu zeigen. Das Festlegen von Attributen für Bildbreite und -höhe nach der Anzeige des Bildes ist absolut sinnlos.
Jaroslaw Stavnichiy