img.naturalWidth

[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