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

Esistono API o metodi JavaScript o jQuery per ottenere le dimensioni di un'immagine nella pagina?

È possibile ottenere a livello di codice l'immagine 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';

Questo può essere utile se l'immagine non fa parte del markup.

clientWidth e clientHeight sono proprietà DOM che mostrano le dimensioni correnti nel browser delle dimensioni interne di un elemento DOM (esclusi margine e bordo). Quindi, nel caso di un elemento IMG, questo otterrà le dimensioni effettive 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;

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 (piuttosto che solo l'elemento immagine).

Se si utilizza jQuery e si richiedono dimensioni delle immagini, è necessario attendere fino al loro caricamento o si otterranno solo zero.

$(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'utilizzo di clientWidthclientHeight, che ora ritengo 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 delle immagini. Indica che heighte widthsono l'altezza / larghezza di rendering dell'immagine e che naturalHeighte naturalWidthsono l'altezza / larghezza intrinseca dell'immagine (e sono solo HTML5).

Ho usato l'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());

Quindi ho usato questo HTML, con CSS incorporato per l'altezza e la larghezza.

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

risultati:

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

/*Actual Rendered size*/    120                  150

Ho quindi modificato il codice HTML nel modo seguente:

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

cioè usando attributi di altezza e larghezza piuttosto che stili incorporati

risultati:

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

/*Actual Rendered size*/     90                  115

Ho quindi modificato il codice HTML nel modo seguente:

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

cioè usando 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 si carichi. Quando l'autore controlla tutti i metodi pubblicati, probabilmente funzionerà solo su localhost. Dato che jQuery può essere usato qui, ricorda che l'evento 'ready' viene generato prima che le immagini vengano caricate. $ ('# xxx'). width () e .height () devono essere attivati ​​nell'evento onload o successivo.

Puoi farlo solo usando un callback dell'evento load in quanto la dimensione dell'immagine non è nota fino a quando non ha terminato 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 larghezza jQuery e altezza jQuery .

Codice di esempio

$(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>

ok ragazzi, penso di aver migliorato il codice sorgente per essere in grado di caricare l'immagine prima di provare a scoprirne le proprietà, altrimenti visualizzerà '0 * 0', perché la prossima istruzione sarebbe stata chiamata prima che il file fosse caricato in 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']);
}

Supponendo, vogliamo ottenere dimensioni dell'immagine di <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
  });

Dimensioni naturali

el.naturalWidthe ci el.naturalHeightdarà le dimensioni naturali , le dimensioni del file immagine.

Dimensioni del layout

el.offsetWidthe ci el.offsetHeightfornirà le dimensioni in base alle quali viene eseguito il rendering dell'elemento sul documento.

Prima di utilizzare le dimensioni reali dell'immagine, è necessario caricare l'immagine di origine. Se usi il framework JQuery puoi ottenere dimensioni reali dell'immagine in modo semplice.

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

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

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

Puoi avere una semplice funzione come la seguente ( imageDimensions()) se non temi di usare le promesse .

// 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>

Risposta di JQuery:

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

Ho pensato che questo potrebbe essere utile per alcuni che stanno usando Javascript e / o Typescript nel 2019.

Ho trovato quanto segue, come alcuni hanno suggerito, per essere errato:

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

Questo è corretto:

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

Conclusione:

Utilizzare img, non this, in onloadfunzione.

Recentemente ho avuto lo stesso problema per un errore nel dispositivo di scorrimento flessibile. L'altezza della prima immagine è stata ridotta a causa del ritardo di caricamento. Ho provato il seguente metodo per risolvere il problema ed ha funzionato.

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

Questo ti darà l'altezza rispetto alla larghezza impostata piuttosto che alla larghezza originale o Zero.

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

È possibile 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;

 });

Semplicemente, puoi provare in questo modo.

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

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

è importante rimuovere l'impostazione interpretata dal browser dal div principale. Quindi, se vuoi la larghezza e l'altezza dell'immagine reali, puoi semplicemente usare

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

Questo è un mio esempio del Progetto TYPO3 in cui ho bisogno delle proprietà reali dell'immagine per ridimensionarlo con la giusta relazione.

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 sia utile. :)

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 più immagini. se devi selezionare per ciascuna delle immagini una per una. Quindi copia e incolla in tutte le funzioni di anteprima dell'immagine e convalida !!!

Prima di acquisire gli attributi dell'elemento, la pagina del documento deve essere caricata:

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

basta passare l'oggetto file img che si ottiene dall'elemento input quando selezioniamo il file corretto che fornirà l'altezza e la larghezza netural dell'immagine

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