Come ottenere le dimensioni dell’immagine (altezza e larghezza) utilizzando JavaScript?

Esistono jQuery o API o metodi JS puri per ottenere le dimensioni di un’immagine nella pagina?

clientWidth e clientHeight sono proprietà DOM che mostrano la dimensione corrente del browser delle dimensioni interne di un elemento DOM (esclusi margini e margini). Quindi nel caso di un elemento IMG, questo otterrà le dimensioni reali dell’immagine visibile.

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

È ansible ottenere l’immagine a livello di codice e controllare le dimensioni utilizzando Javascript …

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

Inoltre (oltre alle risposte di Rex e Ian) c’è:

 imageElement.naturalHeight 

e

 imageElement.naturalWidth 

Questi forniscono l’altezza e la larghezza del file immagine stesso (anziché solo l’elemento immagine).

Se si utilizza jQuery e si richiedono dimensioni di immagine, è necessario attendere fino a quando non si caricano o si ottengono solo zeri.

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

Penso che un aggiornamento a queste risposte sia utile perché una delle risposte più votate suggerisce l’uso di clientWidth e clientHeight, che a mio avviso è ormai obsoleto.

Ho fatto alcuni esperimenti con HTML5, per vedere quali valori vengono effettivamente restituiti.

Prima di tutto, ho usato un programma chiamato Dash per avere una panoramica dell’API di immagine. Indica che height e width sono l’altezza / larghezza del rendering dell’immagine e che naturalHeight e naturalWidth sono l’altezza / larghezza intrinseca dell’immagine (e sono solo HTML5).

Ho usato un’immagine di una bellissima farfalla, da un file con altezza 300 e larghezza 400. E questo Javascript:

 var img = document.getElementById("img1"); console.log(img.height, img.width); console.log(img.naturalHeight, img.naturalWidth); console.log($("#img1").height(), $("#img1").width()); 

Poi ho usato questo HTML, con CSS in linea per l’altezza e la larghezza.

  

risultati:

 /*Image Element*/ height == 300 width == 400 naturalHeight == 300 naturalWidth == 400 /*Jquery*/ height() == 120 width() == 150 /*Actual Rendered size*/ 120 150 

Ho quindi modificato l’HTML al seguente:

  

cioè utilizzando gli attributi di altezza e larghezza piuttosto che gli stili in linea

risultati:

 /*Image Element*/ height == 90 width == 115 naturalHeight == 300 naturalWidth == 400 /*Jquery*/ height() == 90 width() == 115 /*Actual Rendered size*/ 90 115 

Ho quindi modificato l’HTML al seguente:

  

cioè utilizzando sia gli attributi che i CSS, per vedere quale ha la precedenza.

risultati:

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

Usando JQuery fai questo:

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

La cosa che tutti gli altri hanno dimenticato è che non puoi controllare la dimensione dell’immagine prima che carichi. Quando l’autore controlla tutti i metodi pubblicati, funzionerà probabilmente solo su localhost. Poiché jQuery può essere utilizzato qui, ricorda che l’evento “pronto” viene triggersto prima che le immagini vengano caricate. $ (‘# xxx’). width () e .height () devono essere triggersti ​​nell’evento onload o successivo.

Puoi farlo solo usando una richiamata dell’evento load poiché la dimensione dell’immagine non è nota fino a quando non ha completato il caricamento. Qualcosa come il codice qui sotto …

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

Con la libreria jQuery-

Usa .width() e .height() .

Altro in jQuery width e jQuery heigth .

Codice di esempio-

 $(document).ready(function(){ $("button").click(function() { alert("Width of image: " + $("#img_exmpl").width()); alert("Height of image: " + $("#img_exmpl").height()); }); }); 
    

ok ragazzi, penso di aver migliorato il codice sorgente per poter caricare l’immagine prima di provare a scoprire le sue proprietà, altrimenti visualizzerà ‘0 * 0’, perché la prossima dichiarazione sarebbe stata chiamata prima che il file venisse caricato il browser. Richiede 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']); } 

Prima di utilizzare le dimensioni dell’immagine reale, è necessario caricare l’immagine sorgente. Se si utilizza il framework JQuery, è ansible ottenere la dimensione dell’immagine reale in modo semplice.

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

Questa risposta era esattamente ciò che stavo cercando (in jQuery):

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

Risposta JQuery:

 $height = $('#image_id').height(); $width = $('#image_id').width(); 

Semplicemente, puoi testare così.

   

Puoi anche usare:

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

Nicky De Maeyer ha chiesto una foto di sfondo; Lo prendo semplicemente dal css e sostituisco “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())); } 
 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 ... 

Recentemente ho avuto lo stesso problema per un errore nel cursore flex. La prima altezza dell’immagine è stata ridotta a causa del ritardo di caricamento. Ho provato il seguente metodo per risolvere quel problema e ha funzionato.

 // create image with a reference id. Id shall be used for removing it from the dom later. var tempImg = $(''); //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'; 

Questo ti darà l’altezza rispetto alla larghezza impostata piuttosto che alla larghezza originale o zero.

Puoi applicare la proprietà del gestore onload quando la pagina viene caricata in js o jquery in questo modo: –

 $(document).ready(function(){ var width = img.clientWidth; var height = img.clientHeight; }); 
 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. 

Questo è il mio metodo, spero che questo sia utile. 🙂

è importante rimuovere l’impostazione interpretata dal browser dal div principale. Quindi, se vuoi la larghezza e l’altezza dell’immagine reale, puoi semplicemente usarla

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

Questo è un esempio di TYPO3 Project da me in cui ho bisogno delle proprietà reali dell’immagine per adattarlo alla giusta relazione.

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

questo lavoro per l'anteprima e il caricamento di immagini multiple. se devi selezionare per ognuna delle immagini una alla volta. Quindi copia e incolla in tutte le funzioni dell'immagine di anteprima e conferma !!!

Prima di acquisire gli attributi dell’elemento, la pagina del documento dovrebbe essere onload:

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