it-swarm.com.de

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

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

571
Saneef

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.

750
Josh Stodola

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

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

Zusätzlich zu den Antworten von Rex und Ian gibt es auch:

imageElement.naturalHeight

und

imageElement.naturalWidth

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

303
olliej

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

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

Ich halte eine Aktualisierung dieser Antworten für nützlich, da eine der am besten bewerteten Antworten die Verwendung von clientWidth und clientHeight vorschlägt, was meiner Meinung nach veraltet ist.

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

Zunächst habe ich ein Programm namens Dash verwendet, um einen Überblick über die Bild-API zu erhalten. Darin heißt es, dass height und width die gerenderte Höhe/Breite des Bildes und naturalHeight und naturalWidth die intrinsische Höhe/Breite des Bildes sind (und nur HTML5 sind) ).

Ich habe ein Bild von einem wunderschönen Schmetterling 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 die 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 folgendermaßen geändert:

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

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 folgendermaßen geändert:

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

verwenden sowohl von Attributen als auch von CSS, um zu sehen, welche Priorität hat.

Ergebnisse:

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

/*Actual Rendered size*/    120                  150
95
paulo62

Mit JQuery machen Sie Folgendes:

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

Das, was alle anderen vergessen haben, ist, 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 könnte, denken Sie daran, dass das Ereignis 'ready' ausgelöst wird, bevor Bilder geladen werden. $ ('# xxx'). width () und .height () sollten im Onload-Ereignis oder später ausgelöst werden.

25
Thinker

Sie können dies nur mithilfe eines Rückrufs des Ladeereignisses durchführen, 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';
18
Lee Hesselden

Mit jQuery library-

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

Mehr in jQuery width und jQuery heigth .

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>
8
Abrar Jahin

ok jungs, 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']);
}
7
claudio

Bevor Sie die tatsächliche Bildgröße verwenden, sollten Sie das Quellbild laden. Wenn Sie das JQuery-Framework verwenden, können Sie auf einfache Weise die tatsächliche Bildgröße ermitteln.

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

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

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

Einfach mal 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>
2
cloudrain21

JQuery-Antwort:

$height = $('#image_id').height();
$width  = $('#image_id').width();
2
Eli Geske
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 ...
1
user3496915

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

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

 });
1
Harkamal Singh

Sie können eine einfache Funktion wie die folgende haben (imageDimensions()), wenn Sie keine Angst vor der Verwendung von Versprechungen haben.

const imageDimensions = file => new Promise((resolve, reject) => {
  try {
    const img = new Image()    
    img.onload = () => {
      const { naturalWidth: width, naturalHeight: height } = img
      resolve({ width, height })
    }
    img.onerror = () => {
      reject('There was some problem during the image loading')
    }
    img.src = URL.createObjectURL(file)
  } catch (error) {
    reject(error)
  }
})

const getInfo = ({ target: { files } }) => {
 const [file] = files
 imageDimensions(file)
   .then(result => {
     console.info(result)
   })
   .catch(error => {
     console.error(error)
   })
}
Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
1

Nicky De Maeyer fragte nach einem Hintergrundbild; Ich hole 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()));
}
1
Hraban
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, hoffe das ist hilfreich. :)

1
DHA

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

Ich fand das Folgende, 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 img, nicht this, nach onload.

1
Brian

Sie können auch verwenden:

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

Vor kurzem hatte ich das gleiche Problem wegen eines Fehlers im Flex-Slider. Die Höhe des ersten Bildes wurde aufgrund der Ladeverzögerung kleiner eingestellt. Ich habe die folgende Methode zur Behebung 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';

Dadurch erhalten Sie die Höhe in Bezug auf die Breite, die Sie anstelle der ursprünglichen Breite oder Null festgelegt haben.

1
muhammed basil

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 sie einfach verwenden

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

Dies ist ein TYPO3-Projektbeispiel von mir, in dem ich die realen Eigenschaften des Bildes benötige, um es mit der richtigen Beziehung zu skalieren.

0
Rogoit

Vor dem Erfassen der Elementattribute sollte die Dokumentseite geladen werden:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}
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]);
}

diese Arbeit für mehrere Bildvorschau und Upload. wenn Sie für jedes Bild eines nach dem anderen auswählen müssen. Dann kopieren und in alle Vorschaubildfunktionen einfügen und validieren !!!

0
danielad