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

Ist es wichtig, die vom Browser interpretierte Einstellung aus dem übergeordneten Div zu entfernen. Wenn Sie also die tatsächliche Breite und Höhe des Bildes haben möchten, können Sie einfach

$('.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 im richtigen Verhältnis zu skalieren.

Answer 2

Übergeben Sie einfach das Objekt "img file", das durch das Eingabeelement erhalten wird. Wenn wir die richtige Datei auswählen, werden die Netto-Höhe und -Breite des Bildes angezeigt.

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

Answer 3

Sie können auch verwenden:

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

Answer 4

Bevor die Attribute des Elements übernommen werden, sollte die Dokumentseite geladen werden:

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

Answer 5

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.

Das ist meine Methode, ich hoffe, sie ist hilfreich :)