img.naturalWidth

[wonk]

Hallo ich möchte in Abhängigkeit von einem Bildformat (hoch oder quer) bestimmte Formatierungen ändern. Ich versuche dazu Bildhöhe und -breite rauszubekommen. Mit:

<img src="meinBild.jpg" name= "Bild">
<script  type="text/javascript" >
Bildobjekt = document.getElementsByName("Bild");
alert(Bildobjekt.naturalWidth);
</script>

erhalte ich aber immer nur "undefined". Ich habe zwar was vom erforderlichen onload-Ereignis gelesen, verstehe das aber nicht (dummy). Wie macht man das? Gruss, wonk

[Gunnar Bittersmann]

@@wonk

Bildobjekt = document.getElementsByName("Bild");
alert(Bildobjekt.naturalWidth);

erhalte ich aber immer nur "undefined".

console.debug(Bildobjekt) hast du schon gemacht? Und die eckigen Klammern bei dessen Ausgabe übersehen?

Das s in getElementsByName hat schon seine Bewandtnis.

Ich habe zwar was vom erforderlichen onload-Ereignis gelesen

Je nachdem, wann das Script ausgeführt wird, ist ein onload-Eventhandler nicht erforderlich.

🖖 Live long and prosper

[Rolf B]

Hallo wonk,

verwende entweder

const Bilder = document.getElementsByName("Bild");
const BildObjekt = Bilder[0];

(oder let statt const, falls Du der Variablen nochmal was anderes zuweisen willst)

oder nimm querySelector, damit kannst Du Elemente mit Hilfe von CSS Selektoren suchen.

const BildObjekt = document.querySelector("[name=Bild]");

Die eckigen Klammern sind ein Attributselektor, d.h. sie suchen ein Element mit dem Attribut name, das den Wert Bild hat.

Gunnars console.debug(Bildobjekt); setzt voraus, dass Du die Entwicklerwerkzeuge offen hast und dort auf die Konsole schaust. Das tust Du mit der Funktionstaste F12 oder, falls Du die nicht hast, neuerdings auch mit Strg+Umschalttaste+I (userdeutsch für Ctrl+Shift+I)

Rolf

[Gunnar Bittersmann]

@@Rolf B

verwende entweder [Bilder[0]] oder nimm querySelector

Nö, weder noch.

(oder let statt const, falls Du der Variablen nochmal was anderes zuweisen willst)

Das sollte man kaum wollen – das wäre wohl schlechter Programmierstil.

neuerdings auch mit Strg+Umschalttaste+I (userdeutsch für Ctrl+Shift+I)

Mein Gerät hat eine deutsch beschriftete Tastatur (QWERTZ) – *seufz*^[1]. Aber die Tasten heißen [^ control], [⌥ option] und [⌘ command]. Mit „Strg“ (was für eine bescheuerte Abkürzung‽) sprichst du nur für einen Teil der Nutzer.

🖖 Live long and prosper

---

1. Ich verwende sie grundsätzlich als QWERTY-Tastatur (US, gelegentlich auch Polnisch o.a.); die Tastatur ist für mich falsch beschriftet. ↩︎

[wonk]

const Bilder = document.getElementsByName("Bild");
const BildObjekt = Bilder[0];

Hallo, sorry, der Fehler ist klar.

Jetzt erhalte ich mit alert(BildObjekt.naturalWidth) aber als Ergebnis 0 und nicht die Bildbreite!???

mfG

[Der Martin]

Hallo,

const Bilder = document.getElementsByName("Bild");
const BildObjekt = Bilder[0];

Jetzt erhalte ich mit alert(BildObjekt.naturalWidth) aber als Ergebnis 0 und nicht die Bildbreite!???

weil das Bild in dem Moment, wo das Script ausgeführt wird, noch gar nicht geladen ist.

Einen schönen Tag noch
 Martin

[Auge]

Hallo

const Bilder = document.getElementsByName("Bild");
const BildObjekt = Bilder[0];

Hallo, sorry, der Fehler ist klar.

Jetzt erhalte ich mit alert(BildObjekt.naturalWidth) aber als Ergebnis 0 und nicht die Bildbreite!???

Und da kommt, wie Martin schon ansprach, die mögliche und hier wohl vorhandene Notwendigkeit des Events load für das zu berechnende Bild ins Spiel. Wenn du die echte Breite des Bilds ermitteln willst, muss die Bilddatei bereits geladen sein.

Um sicherzustellen, dass die Breitenermittlung erst dann ausgeführt wird, wenn das Bild im lokalen Speicher vorhanden ist, gehört die Ausführung in das Event.

Tschö, Auge

[Matthias Scharwies]

Guten Morgen,

Im SELF-Wiki gibt es ein Beispiel zu images.naturalWidth

'use strict';
document.addEventListener('DOMContentLoaded', function () {
	document.querySelector('#auslesen')
		.addEventListener('click', analyseImage);

	function analyseImage() {
		let image = document.querySelector('img');
		document.querySelector('output')
			.textContent = ' Höhe:  ' + image.height + 'px \n' + ' Breite: ' + image.width +
			'px \n' + ' orig. Höhe:  ' + image.naturalHeight + 'px \n' +
			' orig. Breite: ' + image.naturalWidth + 'px \n';
	}
});

Dort ist der Code nicht weiter erklärt, funktioniert aber.

document.addEventListener('DOMContentLoaded',...) richtet einen EventListener ein, der das Laden des DOM abwartet - erst wenn die Webseite und damit auch das Bild geladen ist, kann man die naturalWidth ermitteln.
.addEventListener('click', analyseImage);ruft bei einem Klick auf den Button die Funktion analyseImage() auf.
Der Rest müsste selbsterklärend sein.

Ansonsten: JavaScript_und_das_DOM/Ereignisverarbeitung

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Im SELF-Wiki gibt es ein Beispiel zu images.naturalWidth

'use strict';
document.addEventListener('DOMContentLoaded', function () {
	document.querySelector('#auslesen')
		.addEventListener('click', analyseImage);

	function analyseImage() {
		let image = document.querySelector('img');
		document.querySelector('output')
			.textContent = ' Höhe:  ' + image.height + 'px \n' + ' Breite: ' + image.width +
			'px \n' + ' orig. Höhe:  ' + image.naturalHeight + 'px \n' +
			' orig. Breite: ' + image.naturalWidth + 'px \n';
	}
});

Dort ist der Code nicht weiter erklärt, funktioniert aber.

Nein, das tut er nicht. Wenn man den Button schnell genug clickt (zwischen DOMContentLoaded und abgeschlossenem Laden des Bildes), kommt 0 raus.

Das Beispiel sollte umgebaut werden auf das load-Event des Bildes; und dann braucht man auch die Nutzerinteraktion und damit den Button nicht mehr.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das Beispiel sollte umgebaut werden auf das load-Event des Bildes

Und wenn man das tut, kann man auch gleich noch

			.textContent = ' Höhe:  ' + image.height + 'px \n' + ' Breite: ' + image.width +
			'px \n' + ' orig. Höhe:  ' + image.naturalHeight + 'px \n' +
			' orig. Breite: ' + image.naturalWidth + 'px \n';

besser lesbar machen:

.textContent = `Höhe: ${image.height}px\n
Breite: ${image.width}px\n
orig. Höhe: ${image.naturalHeight}px\n
orig. Breite: ${image.naturalWidth}px`;

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Und wenn man das tut, kann man auch gleich noch (...) besser lesbar machen:

.textContent = `Höhe: ${image.height}px\n
Breite: ${image.width}px\n
orig. Höhe: ${image.naturalHeight}px\n
orig. Breite: ${image.naturalWidth}px`;

Wo ist das Farbtemplate „rot-grün kariert“, wenn man es braucht?

Für die Montage der Ausgabe ist der Template-String sicher eine gute Idee. Aber die \n sind es nicht. Es sei denn, du WILLST eine Ausgabe mit doppeltem Zeilenabstand.

In einem Template-String sind Zeilenumbrüche im Quellcode möglich und werden zu einem Teil des Strings. Durch \n bekommt man einen weiteren Zeilenumbruch.

Es mag verlockend sein, alles in einem Template-String zu realisieren. Das sieht im Wiki-Beispiel dann so aus:

   function analyzeImage(bild) {
      document.querySelector('output').textContent = 
`Höhe: ${bild.height}px
Breite: ${bild.width}px
orig. Höhe: ${bild.naturalHeight}px
orig. Breite: ${bild.naturalWidth}px`;
   }

Solche Ausbrüche aus der Einrückung mag ich persönlich gar nicht leiden. In PHP kann man das in Heredoc-Strings durch passendes Platzieren des END Symbols lösen, in JS leider nicht. Deswegen würde ich lieber für jede Zeile einen eigenen Template-String verwenden.

   function analyzeImage(bild) {
      document.querySelector('output').textContent = 
         `Höhe: ${bild.height}px\n` + 
         `Breite: ${bild.width}px\n` + 
         `orig. Höhe: ${bild.naturalHeight}px\n` + 
         `orig. Breite: ${bild.naturalWidth}px`;
   }

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wo ist das Farbtemplate „rot-grün kariert“, wenn man es braucht?

Du willst dir einen Kilt schneidern?

Für die Montage der Ausgabe ist der Template-String sicher eine gute Idee. Aber die \n sind es nicht. Es sei denn, du WILLST eine Ausgabe mit doppeltem Zeilenabstand.

Will ich nicht. Hast recht, die \n sollten weg.

Solche Ausbrüche aus der Einrückung mag ich persönlich gar nicht leiden. In PHP kann man das in Heredoc-Strings durch passendes Platzieren des END Symbols lösen, in JS leider nicht. Deswegen würde ich lieber für jede Zeile einen eigenen Template-String verwenden.

Nööö!

Es spricht nichts gegen Einrückungen (guckst du):

   function analyzeImage(bild) {
      document.querySelector('output').textContent = 
         `Höhe: ${bild.height}px
            Breite: ${bild.width}px
            orig. Höhe: ${bild.naturalHeight}px
            orig. Breite: ${bild.naturalWidth}px`;
   }

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Du willst dir einen Kilt schneidern?

Warum nicht. Ich würde dann aber lieber Grün und Blau mit einer Spur Rot nehmen, bevor ich noch den Kopf verliere...

Es spricht nichts gegen Einrückungen

außer white-space: pre.

Bei pre-line funktioniert es, ja, weil der Brauser die Leerzeichen nicht darstellt.

Rolf

[Gunnar Bittersmann]

@@wonk

<img src="meinBild.jpg" name= "Bild">
<script  type="text/javascript" >
Bildobjekt = document.getElementsByName("Bild");
alert(Bildobjekt.naturalWidth);
</script>

Ich wusste gar nicht, dass ein img-Element ein name-Attribut haben kann. Mal in die Spec geschaut: Kann’s auch gar nicht. Der Validator meint dazu: Error: The name attribute on the img element is obsolete.

Ah, das gab’s irgendwann mal; deshalb geht auch getElementsByName() hier (noch). Da Browser i.a.R. abwärtskompatibel sein wollen, würde ich nicht erwarten, dass sie das bald nicht mehr unterstützen, aber verlassen würde ich mich auch nicht darauf.

Der Validator weiter: Use the id attribute instead. Genau das hätte ich auch gesagt. Und getElementById() hat kein s drin. (querySelector() auch nicht – sondern ein S. 😉)

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Ich wusste gar nicht, dass ein img-Element ein name-Attribut haben kann.

Und ich habe gedacht, es wäre ein Universalattribut. Darum war mir der Grund für dein Nö erstmal gar nicht klar. Dir schon, weil du das später geschrieben hast. Aber wer von oben nach unten liest, ist erstmal vor den Kopf gestoßen.

Also id, oder, wenn man die mögliche Mehrdeutigkeit von name nutzen will, eine Klasse.

Rolf

[Der Martin]

n'Abend!

Aber wer von oben nach unten liest, ist erstmal vor den Kopf gestoßen.

ich lese grundsätzlich von oben nach unten, also vom älteren zum jüngeren Beitrag. Wo immer möglich, stelle ich mir diese "natürliche" Reihenfolge ein.

Auch Mails lasse ich von oben nach unten sortiert anzeigen - also die älteren oben, die jüngeren weiter unten.

Einen schönen Tag noch
 Martin