Wie kann man die Bildgröße (Höhe und Breite) mit JavaScript ermitteln?

Question

Gibt es irgendwelche JavaScript- oder jQuery-APIs oder Methoden, um die Abmessungen eines Bildes auf der Seite zu ermitteln?

Answer 1

Mit JQuery können Sie dies tun:

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

Answer 2

Was alle anderen vergessen haben, ist, dass man die Bildgröße nicht überprüfen kann, bevor es geladen wird. Wenn der Autor alle geposteten Methoden überprüft, wird es wahrscheinlich nur auf localhost funktionieren. Da jQuery hier verwendet werden könnte, denken Sie daran, dass das 'ready'-Ereignis ausgelöst wird, bevor die Bilder geladen werden. $('#xxx').width() und .height() sollten im onload-Ereignis oder später abgefeuert werden.

Answer 3

Dies ist nur über einen Callback des load-Ereignisses möglich, da die Größe des Bildes erst bekannt ist, wenn es tatsächlich geladen wurde. Etwas wie der Code unten...

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

Answer 4

Lassen Sie uns alles, was wir hier gelernt haben, in einer einfachen Funktion zusammenfassen ( imageDimensions() ). Sie verwendet verspricht .

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

Answer 5

Um die natürliche Höhe und Breite zu erhalten:

document.querySelector("img").naturalHeight;
document.querySelector("img").naturalWidth;

<img src="img.png">

Und wenn Sie Höhe und Breite des Stils erhalten möchten:

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