Auf welche Weise kann man ein Bild vom Server…

Es gibt mehrere Hauptmethoden, um Bilder vom Server im Frontend zu erhalten:

<img>-Tag: Die einfachste und gebräuchlichste Methode. Verwendet das Attribut src, um die URL des Bildes anzugeben.
```
<img src="/images/logo.png" alt="Firmenlogo">
```
CSS-Eigenschaft background-image: Wird verwendet, um ein Bild als Hintergrund eines Elements zu platzieren.
```
.hero-section {
  background-image: url('/images/hero.jpg');
  background-size: cover;
}
```

AJAX (XMLHttpRequest oder Fetch API): Ermöglicht das asynchrone Laden von Bildern, oft für dynamische Inhaltsaktualisierungen oder die Manipulation von Bilddaten (z.B. für Vorschaubilder oder clientseitige Verarbeitung). Die Daten können in verschiedenen Formaten vorliegen (z.B. Base64).

fetch('/api/image/123')
  .then(response => response.blob()) // Daten als Blob erhalten
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob); // URL für Blob erstellen
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Fehler beim Laden des Bildes:', error));

Bild im Base64-Format erhalten:

fetch('/api/image/base64/123')
  .then(response => response.text()) // Daten als Text (Base64-String) erhalten
  .then(base64String => {
    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + base64String; // Beispiel für PNG
    document.body.appendChild(img);
  })
  .catch(error => console.error('Fehler beim Laden des Bildes:', error));

WebSockets: Für den Echtzeit-Erhalt von Bildern, z.B. in Streaming-Anwendungen oder Spielen. Bilder können als Binärdaten übertragen werden.

const socket = new WebSocket('ws://localhost:8080');

socket.onmessage = (event) => {
  if (event.data instanceof Blob) {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(event.data);
    document.body.appendChild(img);
  }
};

<canvas> mit drawImage: Bilder können über AJAX oder <img> geladen und dann auf einem <canvas>-Element gezeichnet werden.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = () => {
  ctx.drawImage(img, 0, 0);
};

img.src = '/images/image_for_canvas.png';

Streaming (mit ReadableStream): Für die Verarbeitung großer Bilder oder das Übertragen von Bildern in Teilen.

fetch('/large-image-stream')
  .then(response => response.body)
  .then(reader => {
    // Lesen und Verarbeiten des Datenstroms des Bildes
    // Zum Beispiel TextDecoder für Text oder ArrayBuffer für Binärdaten verwenden
  })
  .catch(error => console.error('Streaming-Fehler:', error));

Die Wahl der Methode hängt von der spezifischen Aufgabe, den Leistungsanforderungen, der Notwendigkeit asynchroner Ladung und dem Datentyp des Bildes ab.

Auf welche Weise kann man ein Bild vom Server erhalten?