So erhalten Sie die ursprüngliche Breite und Höhe des Bildes in JS-HTML-Kenntnisse-php.cn

So erhalten Sie die ursprüngliche Breite und Höhe des Bildes in JS

藏色散人

Freigeben： 2021-01-11 11:13:17

Original

7963 Leute haben es durchsucht

JS erhält die ursprüngliche Breite und Höhe des Bildes, was der ursprünglichen Größe des Bildes entspricht. Wir können die ursprüngliche Größe des Bildes über die HTML5-Attribute naturalWidth und naturalHeight erhalten. Die ursprüngliche Breite und Höhe eines Bildes kann mithilfe der HTML5-Bildeigenschaften naturalWidth und naturalHeight leicht ermittelt werden.

Empfohlene Referenz: „JavaScript-Tutorial“

So erhalten Sie die ursprüngliche Breite und Höhe des Bildes in JS

Nun, im vorherigen Artikel habe ich es bereits vorgestellt SieDie JS-Methode zum Ermitteln der aktuellen Breite und Höhe eines Bildes ähnelt tatsächlich der Methode zum Ermitteln der ursprünglichen Breite und Höhe. Freunde, die sie benötigen, können sich zuerst darauf beziehen.

Im Folgenden werden wir weiterhin spezifische Codebeispiele kombinieren, um Ihnen die js-Methode zum Erhalten der Originalbildgröße vorzustellen.

Das Codebeispiel lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>js获取图片原始宽高的示例</title>
    <script type="text/javascript">
 function imgSize(){
            var myImg = document.querySelector("#sky");
            var realWidth = myImg.naturalWidth;
            var realHeight = myImg.naturalHeight;
            alert("原始 width=" + realWidth + ", " + "原始 height=" + realHeight);
 }
    </script>
</head>
<body>
<img src="./1/png" id="sky" style=" width:250px;" >
<p><button type="button" onclick="imgSize();">获取</button></p>
</body>
</html>

Nach dem Login kopieren

Im Gegensatz zu den Attributen clientWidth und clientHeight, die die aktuelle Breite und Höhe des Bildes erhalten, erfolgt das Erhalten der Originalgröße des Bildes hauptsächlich über naturalWidth und naturalHeightEigenschaften. Die ursprüngliche Breite und Höhe des durch diese beiden Eigenschaften erhaltenen Bildes ändert sich aufgrund von Änderungen in den Einstellungen der externen Breiten- und Höheneigenschaften nicht.

Die ursprüngliche Breite und Höhe des hier verwendeten Bildes ist wie folgt: 716x565px;

So erhalten Sie die ursprüngliche Breite und Höhe des Bildes in JS

Verwenden Sie dann den obigen js-Code um das Originalgrößenergebnis des Bildes zu erhalten Wie in der folgenden Abbildung gezeigt:

So erhalten Sie die ursprüngliche Breite und Höhe des Bildes in JS

Hinweis: Die Methode querySelector() gibt ein Element im Dokument zurück, das mit dem übereinstimmt angegebenen CSS-Selektor. Die Methode querySelector() gibt nur das erste Element zurück, das mit dem angegebenen Selektor übereinstimmt. Wenn Sie alle Elemente zurückgeben müssen, verwenden Sie stattdessen die Methode querySelectorAll().

Dieser Artikel ist eine Einführung in die Methode zum Ermitteln der ursprünglichen Breite und Höhe eines Bildes mit js. Ich hoffe, dass er auch für Freunde hilfreich ist, die ihn benötigen.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie die ursprüngliche Breite und Höhe des Bildes in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!