Wie erhalte ich mit JavaScript oder jQuery die natürlichen Abmessungen eines Bildes?
P粉916553895
P粉916553895 2023-10-21 13:53:08
0
2
562

Bisher habe ich diesen Code:

var img = document.getElementById('draggable'); var width = img.clientWidth; var height = img.clientHeight;

Dadurch erhalte ich jedoch die HTML-Attribute – CSS-Stile. Ich möchte die Abmessungen der tatsächlichen Bildressource der Datei erhalten.

Ich brauche das, weil nach dem Hochladen des Bildes dessen Breite auf 0 Pixel eingestellt ist und ich nicht weiß, warum oder wo das passiert. Um dies zu verhindern, möchte ich die tatsächlichen Abmessungen abrufen und zurücksetzen. Ist es möglich?

EDIT: Selbst wenn ich versuche, die natürliche Breite zu ermitteln, ist das Ergebnis 0. Ich habe ein Bild hinzugefügt. Das Seltsame ist, dass dies nur passiert, wenn ich eine neue Datei hochlade, und nach einer Aktualisierung funktioniert es einwandfrei.

http://oi39.tinypic.com/3582xq9.jpg

P粉916553895
P粉916553895

Antworte allen (2)
P粉239164234

img.naturalHeightimg.naturalWidth为您提供图像本身的宽度和高度,而不是 DOM 元素。

    P粉148434742

    您可以使用naturalWidthnaturalHeight,这些属性包含图像的实际的、未修改的宽度和高度,但您必须等到图像加载得到他们

    var img = document.getElementById('draggable'); img.onload = function() { var width = img.naturalWidth; var height = img.naturalHeight; }

    此功能仅支持IE9及以上版本,如果您必须支持旧版浏览器,您可以创建一个新图像,将其源设置为相同的图像,如果不修改图像的大小,它将返回图像的自然尺寸,因为当没有给出其他尺寸时,这将是默认尺寸

    var img = document.getElementById('draggable'), new_img = new Image(); new_img.onload = function() { var width = this.width, heigth = this.height; } new_img.src = img.src;

    FIDDLE

      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!