Ausführliche Erklärung, wie man mit Javascript die ursprüngliche Breite und Höhe eines Bildes erhält

Vorwort

Es gibt im Internet viele Methoden zur Verwendung von Javascript, um die ursprüngliche Breite und Höhe von Bildern zu ermitteln. In diesem Artikel wird noch einmal auf dieses Problem eingegangen, was für einige Leute hilfreich sein kann.

Detaillierte Erklärung des

img-Elements auf der Seite. Wenn Sie die Originalgröße am Beispiel der Breite erhalten möchten, fällt Ihnen möglicherweise als Erstes das innerWidth-Attribut ein das Element oder width() in der jQuery-Methode.

lautet wie folgt:

<img  id="img" src="1.jpg" alt="Ausführliche Erklärung, wie man mit Javascript die ursprüngliche Breite und Höhe eines Bildes erhält" >
 
<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 600
</script>

Es scheint, dass Sie die Größe des Bildes ermitteln können.

Aber wenn Sie beispielsweise das width-Attribut zum img-Element hinzufügen, beträgt die tatsächliche Breite des Bildes 600 und die Breite wird auf 400 festgelegt. Zu diesem Zeitpunkt beträgt innerWidth 400, nicht 600. Offensichtlich ist es unzuverlässig, innerWidth zu verwenden, um die Originalgröße des Bildes zu erhalten.

Dies liegt daran, dass die innerWidth-Eigenschaft die tatsächlich gerenderte Breite des Elementboxmodells erhält, nicht die ursprüngliche Breite des Bildes.

<img  id="img" src="1.jpg"    style="max-width:90%" alt="Ausführliche Erklärung, wie man mit Javascript die ursprüngliche Breite und Höhe eines Bildes erhält" >
 
<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 400
</script>

Die width()-Methode von jQuery ruft die innerWidth-Eigenschaft auf der untersten Ebene auf, sodass die von der width()-Methode erhaltene Breite nicht die ursprüngliche Breite des Bildes ist.

Wie erhält man also die ursprüngliche Breite des img-Elements?

naturalWidth/naturalHeight

HTML5 bietet ein neues Attribut naturalWidth/naturalHeight, mit dem die ursprüngliche Breite und Höhe des Bildes direkt ermittelt werden kann. Diese beiden Eigenschaften wurden in Firefox/Chrome/Safari/Opera und IE9 implementiert.

lautet wie folgt:

var naturalWidth = document.getElementById('img').naturalWidth,
 naturalHeight = document.getElementById('img').naturalHeight;

Die Kompatibilität von naturalWidth / naturalHeight in gängigen Browsern ist wie folgt:

Wenn Sie also keine Kompatibilität mit IE8 in Betracht ziehen, können Sie bedenkenlos die Attribute naturalWidth / naturalHeight verwenden.

Kompatibilitätsimplementierung in IE7/8:

Browser von IE8 und früheren Versionen unterstützen die Attribute naturalWidth und naturalHeight nicht.

In IE7/8 können wir new Image() verwenden, um die Originalgröße des Bildes wie folgt zu erhalten:

function getNaturalSize (Domlement) {
 var img = new Image();
 img.src = DomElement.src;
 return {
  width: img.width,
  height: img.height
 };
}
 
// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

IE7+-Browser können die kompatible Funktion nutzen Kapselung:

function getNaturalSize (Domlement) {
 var natureSize = {};
 if(window.naturalWidth && window.naturalHeight) {
  natureSize.width = Domlement.naturalWidth;
  natureSizeheight = Domlement.naturalHeight;
 } else {
  var img = new Image();
  img.src = DomElement.src;
  natureSize.width = img.width;
  natureSizeheight = img.height;
 }
 return natureSize;
}
 
// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er einige Vorteile für das Studium oder die Arbeit aller bringen kann. helfen. Wenn Sie Fragen haben, können Sie zur Kommunikation eine Nachricht hinterlassen.

Ausführlichere Erklärungen, wie Sie mit Javascript die ursprüngliche Breite und Höhe eines Bildes erhalten, finden Sie auf der chinesischen PHP-Website für verwandte Artikel!