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

Utilice .width() y .height() .

Mehr in jQuery Breite y jQuery-Höhe .

Beispiel Code-

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

Answer 2

JQuery Antwort:

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

Answer 3

Kürzlich hatte ich das gleiche Problem mit einem Fehler im Flex-Slider. Die Höhe des ersten Bildes wurde aufgrund der Ladeverzögerung kleiner eingestellt. Ich habe die folgende Methode ausprobiert, um das Problem zu lösen, und es hat funktioniert.

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

Dadurch erhalten Sie die Höhe in Bezug auf die eingestellte Breite und nicht die ursprüngliche Breite oder Null.

Answer 4

Meine zwei Cents in Jquery

Haftungsausschluss: Dies ist nicht unbedingt eine Antwort auf diese Frage, sondern erweitert unsere Möglichkeiten. Getestet und funktioniert in jQuery 3.3.1

Bedenken wir:

1. Sie haben die Bildurl/den Bildpfad und möchten die Breite und Höhe des Bildes ermitteln, ohne es im DOM zu rendern,

2. Bevor das Bild im DOM gerendert wird, müssen Sie den offsetParent-Knoten oder das Bild-Div-Wrapper-Element auf die Breite und Höhe des Bildes einstellen, um einen flüssigen Wrapper für verschiedene Bildgrößen zu erstellen, z. B. wenn Sie auf eine Schaltfläche klicken, um das Bild in einem Modal/Lightbox anzuzeigen

So werde ich es machen:

// image path
const imageUrl = '/path/to/your/image.jpg'

// Create dummy image to get real width and height
$('<img alt="" src="">').attr("src", imageUrl).on('load', function(){
    const realWidth = this.width;
    const realHeight = this.height;
    alert(`Original width: ${realWidth}, Original height: ${realHeight}`);
})

Answer 5

Dies ist eine alternative Antwort für Node.js, die wahrscheinlich nicht das ist, was der OP gemeint hat, aber nützlich sein könnte und in den Bereich der Frage zu fallen scheint.

Dies ist eine Lösung mit Node.js, das Beispiel verwendet Next.js Framework, würde aber mit jedem Node.js Framework funktionieren. Es verwendet probe-image-size NPM-Paket, um die Bildattribute auf der Serverseite aufzulösen.

Beispiel für einen Anwendungsfall : Ich habe den folgenden Code verwendet, um die Größe eines Bildes aus einem Airtable-Automation-Skript zu bestimmen, das mein eigenes aufruft analyzeImage API und gibt die Requisiten des Bildes zurück.

import {
  NextApiRequest,
  NextApiResponse,
} from 'next';
import probe from 'probe-image-size';

export const analyzeImage = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  try {
    const result = await probe('http://www.google.com/intl/en_ALL/images/logo.gif');

    res.json(result);
  } catch (e) {
    res.json({
      error: true,
      message: process.env.NODE_ENV === 'production' ? undefined : e.message,
    });
  }
};

export default analyzeImage;

Ausbeute:

{
"width": 276,
"height": 110,
"type": "gif",
"mime": "image/gif",
"wUnits": "px",
"hUnits": "px",
"length": 8558,
"url": "http://www.google.com/intl/en_ALL/images/logo.gif"
}