Weboldal keresés

jquery - Hogyan lehet lekérdezni a kép méretét (magasság és szélesség) JavaScript használatával

Van JavaScript vagy jQuery API vagy módszer az oldal képének méreteinek lekérésére?

Válasz #1

A képet programozottan is lekérheti, és ellenőrizheti a méreteit JavaScript segítségével...

const img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Ez hasznos lehet, ha a kép nem része a jelölésnek.

Válasz #2

Továbbá (Rex és Ian válaszai mellett) van még:

imageElement.naturalHeight

és

imageElement.naturalWidth

Ezek az állomány magasságát és szélességét adják meg (nemcsak a képelemét).

Válasz #3

A clientWidth és a clientHeight DOM-tulajdonságok, amelyek a DOM elem belső méreteinek aktuális, böngészőben lévő méretét mutatják (kizárva a margót és a szegélyt). Tehát egy IMG elem esetében ez a látható kép tényleges méreteit adja meg.

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

Válasz #4

Ha jQuery-t használsz és képméreteket kérsz le, várnod kell, amíg betöltődnek, különben csak nullákat kapsz.

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

Válasz #5

Úgy gondolom, a clientWidth és a clientHeight használata most már elavult.

Végeztem néhány kísérletet az HTML5-tel, hogy lássam, mely értékek térnek vissza valójában.

Először is, használtam egy Dash nevű programot, hogy áttekintést kapjak a képfájl API-ról.

Azt állítja, hogy a height és a width a kép megjelenített magassága/szélessége, míg a naturalHeight és a naturalWidth a kép valódi magassága/szélessége (és csak HTML5-ben érhetők el).

Egy gyönyörű pillanatról készült képet használtam, egy 300 magas és 400 széles fájlból. És ez a JavaScript kód:

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

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

Ezután ezt az HTML-t használtam, beágyazott CSS-sel a magasság és a szélesség beállításához.

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

Eredmények :

/* Image element */ height == 300         width == 400
             naturalHeight == 300  naturalWidth == 400
/* jQuery */      height() == 120       width() == 150

/* Actual rendered size */    120                  150

Ezután az HTML-t a következőre változtattam:

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

Azaz a magasság és szélesség attribútumok használata az inline stílusok helyett.

Eredmények :

/* Image element */ height ==  90         width == 115
             naturalHeight == 300  naturalWidth == 400
/* jQuery */      height() ==  90       width() == 115

/* Actual rendered size */     90                  115

Ezután az HTML-t a következőre változtattam:

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

Azaz, mind az attribútumokat, mind a CSS-t használva, hogy lássuk, melyik érvényesül.

Eredmények :

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

/* Actual rendered size */    120                  150

Válasz #6

jQuery használatával ezt csinálod:

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

Válasz #7

Ami mindenki másnak elfelejtődött, az az, hogy a képméretet nem lehet ellenőrizni, mielőtt betöltődik. Amikor a szerző az összes közzétett módszert ellenőrzi, valószínűleg csak a localhoston fog működni.

Mivel itt használható a jQuery, ne feledd, hogy a 'ready' esemény a képek betöltése előtt kerül kiváltásra. A $ ('#xxx').width() és a .height() hívást az onload eseményben vagy később kell végrehajtani.

Válasz #8

Foglaljuk össze mindazt, amit itt tanultunk, egy egyszerű függvénybe (imageDimensions()). Promise-okat használ.

// helper to get dimensions of an image
const imageDimensions = file => 
    new Promise((resolve, reject) => {
        const img = new Image()

        // the following handler will fire after a successful loading 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.

Válasz #9

Ezt igazából csak a betöltési esemény visszahívása segítségével lehet megtenni, mivel a kép mérete csak akkor ismert, amikor az ténylegesen befejeződött a betöltés. Valami olyasmi, mint az alábbi kód...

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

Válasz #10

A természetes magasság és szélesség eléréséhez:

document.querySelector("img").naturalHeight;
document.querySelector("img").naturalWidth;
<img src="img.png">

És ha meg akarod kapni a stílus magasságát és szélességét:

document.querySelector("img").offsetHeight;
document.querySelector("img").offsetWidth;

Válasz #11

Feltételezve, hogy meg akarjuk szerezni a <img id="an-img" src"..."> kép méreteit

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

Természetes dimenziók

el.naturalWidth és el.naturalHeight megadják nekünk a természetes méreteket, a kép fájl méreteit.

Elrendezés méretei

el.offsetWidth és el.offsetHeight meg fogja adni számunkra az elemet a dokumentumon kirajzolódó méreteit.

Kapcsolódó cikkek