Home / Programmazione / Javascript - AJAX / Ottenere la dimensione reale di una immagine con jQuery
Mattepuffo

Ottenere la dimensione reale di una immagine con jQuery

Ottenere la dimensione reale di una immagine con jQuery

Lo scenario è questo: dentro una pagina abbiamo un' immagine che potrebbe anche essere ridemensionata via CSS / HTML, e della quale vogliamo sapere la dimensione reale.

Come possiamo fare?

Possiamo ottenere questa informazione tramite jQuery con due funzioni come queste:

function getOriginalWidth(img) {
 
    var originalImg = img.clone();
    $('body').append(originalImg);
 
    originalImg.removeAttr("width")
        .removeAttr("max-width")
        .removeAttr("min-width")
        .css({
            "width": "",
            "max-width": "",
            "min-width": ""
        });
 
    currentImageWidth = originalImg.width();
    originalImg.remove();
 
    return currentImageWidth;
}
 
function getOriginalHeigth(img) {
 
    var originalImg = img.clone();
    $('body').append(originalImg);
 
    clone.removeAttr("height")
        .removeAttr("max-height")
        .removeAttr("min-height")
        .css({
            "height": "",
            "max-height": "",
            "min-height": ""
        });
 
    currentImageHeight = originalImg.height();
    originalImg.remove();
 
    return currentImageHeight;
}

Le due funzioni sono speculari: una per la larghezza e l'altra per l'altezza.

Funzionano in egaul modo:

  • fanno un clone dell'immagine
  • levano tutti gli attributi CSS
  • leggono le dimensioni
  • cancellano il doppione

Ciao!