Jak uzyskać rozmiar obrazu (wysokość i szerokość) za pomocą JavaScript?

Czy są jakieś interfejsy JavaScript lub jQuery API lub metody uzyskiwania wymiarów obrazu na stronie?

Możesz programowo uzyskać obraz i sprawdzić wymiary za pomocą 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';

Może to być przydatne, jeśli obraz nie jest częścią znaczników.

clientWidth i clientHeight są właściwościami DOM, które pokazują bieżący rozmiar wewnętrznych wymiarów elementu DOM w przeglądarce (bez marginesu i ramki). Tak więc w przypadku elementu IMG uzyska on rzeczywiste wymiary widocznego obrazu.

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

Ponadto (oprócz odpowiedzi Rexa i Iana) są:

imageElement.naturalHeight

i

imageElement.naturalWidth

Zapewniają one wysokość i szerokość samego pliku obrazu (a nie tylko elementu obrazu).

Jeśli korzystasz z jQuery i żądasz rozmiarów obrazu, musisz poczekać, aż się załadują, bo dostaniesz tylko zera.

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

Myślę, że aktualizacja tych odpowiedzi jest przydatna, ponieważ jedna z najlepiej głosowanych odpowiedzi sugeruje użycie clientWidthi clientHeight, które moim zdaniem jest już nieaktualne.

Przeprowadziłem kilka eksperymentów z HTML5, aby zobaczyć, które wartości faktycznie zostaną zwrócone.

Przede wszystkim użyłem programu Dash o nazwie Dash, aby uzyskać przegląd interfejsu API obrazu. Stwierdza, że heighti widthsą renderowaną wysokością / szerokością obrazu oraz że naturalHeighti naturalWidthsą wewnętrzną wysokością / szerokością obrazu (i są tylko HTML5).

Użyłem obrazu pięknego motyla z pliku o wysokości 300 i szerokości 400. I ten Javascript:

var img = document.getElementById("img1");

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

Następnie użyłem tego HTML z wbudowanym CSS dla wysokości i szerokości.

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

Wyniki:

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

/*Actual Rendered size*/    120                  150

Następnie zmieniłem HTML na następujący:

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

tzn. używając atrybutów wysokości i szerokości zamiast stylów wbudowanych

Wyniki:

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

/*Actual Rendered size*/     90                  115

Następnie zmieniłem HTML na następujący:

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

tzn. używając zarówno atrybutów, jak i CSS, aby zobaczyć, które mają pierwszeństwo.

Wyniki:

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

/*Actual Rendered size*/    120                  150

Za pomocą JQuery robisz to:

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

Rzecz, o której wszyscy zapomnieli, to fakt, że nie można sprawdzić rozmiaru obrazu przed jego załadowaniem. Gdy autor sprawdzi wszystkie opublikowane metody, prawdopodobnie będzie działać tylko na localhost. Ponieważ można tutaj użyć jQuery, pamiętaj, że zdarzenie „gotowe” jest uruchamiane przed załadowaniem obrazów. $ ('# xxx'). width () i .height () powinny zostać uruchomione w zdarzeniu onload lub późniejszym.

Naprawdę możesz to zrobić tylko za pomocą wywołania zwrotnego zdarzenia load, ponieważ rozmiar obrazu nie jest znany, dopóki faktycznie się nie załaduje. Coś w rodzaju kodu poniżej ...

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

Z jQuery library-

Użyj .width()i.height() .

Więcej w szerokości jQuery i wysokości jQuery .

Przykładowy kod

$(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, myślę, że poprawiłem kod źródłowy, aby umożliwić ładowanie obrazu przed próbą znalezienia jego właściwości, w przeciwnym razie wyświetli się „0 * 0”, ponieważ następna instrukcja zostałaby wywołana przed załadowaniem pliku do przeglądarka. Wymaga 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']);
}

Zakładając, że chcemy uzyskać wymiary obrazu <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
  });

Naturalne wymiary

el.naturalWidthi el.naturalHeightzapewni nam naturalne wymiary , wymiary pliku obrazu.

Wymiary układu

el.offsetWidthi el.offsetHeightdostanie wymiary, w których element jest renderowany w dokumencie.

Przed użyciem rzeczywistego rozmiaru obrazu należy załadować obraz źródłowy. Jeśli używasz frameworka JQuery, możesz uzyskać rzeczywisty rozmiar obrazu w prosty sposób.

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

Ta odpowiedź była dokładnie tym, czego szukałem (w jQuery):

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

Możesz mieć prostą funkcję, jak poniżej ( imageDimensions()), jeśli nie boisz się używać obietnic .

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

Odpowiedź JQuery:

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

Pomyślałem, że może to być pomocne dla niektórych użytkowników JavaScript i / lub maszynopisu w 2019 roku.

Stwierdziłem, że, jak sugerują niektórzy, niepoprawne:

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

To jest poprawne:

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

Wniosek:

Użyj img, a nie thisw onloadfunkcji.

Ostatnio miałem ten sam problem z błędem w suwaku Flex. Wysokość pierwszego obrazu została ustawiona na mniejszą wartość ze względu na opóźnienie ładowania. Wypróbowałem następującą metodę rozwiązania tego problemu i udało się.

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

To da ci wysokość w stosunku do ustawionej szerokości zamiast oryginalnej szerokości lub Zera.

Możesz także użyć:

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

Nicky De Maeyer zapytał po zdjęciu tła; Po prostu pobieram go z css i zastępuję „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()));
}

Można zastosować właściwość modułu obsługi obciążenia, gdy strona ładuje się w js lub jquery w następujący sposób: -

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

 });

Możesz po prostu przetestować w ten sposób.

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

ważne jest, aby usunąć ustawienie interpretowane w przeglądarce z nadrzędnego div. Więc jeśli chcesz rzeczywistą szerokość i wysokość obrazu, możesz po prostu użyć

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

To jeden przykład projektu TYPO3 ode mnie, w którym potrzebuję prawdziwych właściwości obrazu, aby skalować go z odpowiednią relacją.

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.

To jest moja metoda, mam nadzieję, że będzie pomocna. :)

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

ta praca dla podglądu i przesyłania wielu zdjęć. jeśli musisz wybrać dla każdego z obrazów jeden po drugim. Następnie skopiuj i wklej do wszystkich funkcji podglądu obrazu i zatwierdź !!!

Przed uzyskaniem atrybutów elementu strona dokumentu powinna zostać załadowana:

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

wystarczy przekazać obiekt pliku img, który jest uzyskiwany przez element wejściowy, gdy wybieramy odpowiedni plik, poda on wysokość i szerokość obrazu

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