Op welke manieren kan een afbeelding van de server…

Er zijn verschillende hoofdmethoden om afbeeldingen vanaf de server in de frontend te verkrijgen:

<img>-tag: De eenvoudigste en meest gebruikte methode. Gebruikt het attribuut src om de URL van de afbeelding aan te geven.
```
<img src="/images/logo.png" alt="Bedrijfslogo">
```
CSS-eigenschap background-image: Wordt gebruikt om een afbeelding als achtergrond van een element te plaatsen.
```
.hero-section {
  background-image: url('/images/hero.jpg');
  background-size: cover;
}
```

AJAX (XMLHttpRequest of Fetch API): Maakt het mogelijk om afbeeldingen asynchroon op te halen, vaak voor het dynamisch bijwerken van inhoud of het manipuleren van afbeeldingsgegevens (bijvoorbeeld voor previews of client-side verwerking). De verkregen gegevens kunnen in verschillende formaten zijn (bijvoorbeeld Base64).

fetch('/api/image/123')
  .then(response => response.blob()) // Data als Blob verkrijgen
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob); // URL voor Blob maken
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Fout bij het laden van de afbeelding:', error));

Afbeelding in base64-formaat verkrijgen:

fetch('/api/image/base64/123')
  .then(response => response.text()) // Data als tekst (Base64-string) verkrijgen
  .then(base64String => {
    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + base64String; // Voor PNG
    document.body.appendChild(img);
  })
  .catch(error => console.error('Fout bij het laden van de afbeelding:', error));

WebSockets: Voor het verkrijgen van afbeeldingen in realtime, bijvoorbeeld in streamingapplicaties of games. Afbeeldingen kunnen worden verzonden als binaire gegevens.

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> met drawImage: Afbeeldingen kunnen worden geladen via AJAX of <img> en vervolgens worden getekend op een <canvas>-element.

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 (met ReadableStream): Voor het verwerken van grote afbeeldingen of het delen van afbeeldingen in delen.

fetch('/large-image-stream')
  .then(response => response.body)
  .then(reader => {
    // Lezen en verwerken van de afbeeldingsstroom
    // Bijvoorbeeld, TextDecoder gebruiken voor tekst of ArrayBuffer voor binaire gegevens
  })
  .catch(error => console.error('Streamfout:', error));

De keuze van de methode hangt af van de specifieke taak, prestatie-eisen, de noodzaak van asynchroon laden en het type afbeeldingsgegevens.

Op welke manieren kan een afbeelding van de server worden verkregen?