Comment peut-on obtenir une image du serveur…

Il existe plusieurs méthodes principales pour obtenir des images depuis le serveur dans le Frontend :

Balise <img> : La méthode la plus simple et courante. Utilise l'attribut src pour indiquer l'URL de l'image.
```
<img src="/images/logo.png" alt="Logo de l'entreprise">
```

Propriété CSS background-image : Utilisée pour placer une image en tant que fond d'un élément.

.hero-section {
  background-image: url('/images/hero.jpg');
  background-size: cover;
}

AJAX (XMLHttpRequest ou Fetch API) : Permet d'obtenir des images de manière asynchrone, souvent pour mettre à jour dynamiquement le contenu ou manipuler les données de l'image (par exemple, pour créer des aperçus ou traiter côté client). Les données obtenues peuvent être dans différents formats (par exemple, Base64).

fetch('/api/image/123')
  .then(response => response.blob()) // Obtenir les données en tant que Blob
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob); // Créer une URL pour le Blob
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Erreur lors du chargement de l’image:', error));

Obtenir une image en format base64 :

fetch('/api/image/base64/123')
  .then(response => response.text()) // Obtenir les données sous forme de texte (chaîne Base64)
  .then(base64String => {
    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + base64String; // Exemple pour PNG
    document.body.appendChild(img);
  })
  .catch(error => console.error('Erreur lors du chargement de l’image:', error));

WebSockets : Pour obtenir des images en temps réel, par exemple dans des applications de streaming ou des jeux. Les images peuvent être transmises sous forme de données binaires.

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> avec drawImage : Les images peuvent être chargées via AJAX ou <img> puis dessinées sur un élément <canvas>.

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 (avec ReadableStream) : Pour traiter de grandes images ou transmettre des images par morceaux.

fetch('/large-image-stream')
  .then(response => response.body)
  .then(reader => {
    // Lecture et traitement du flux de données de l'image
    // Par exemple, utiliser TextDecoder pour du texte ou traiter ArrayBuffer pour des données binaires
  })
  .catch(error => console.error('Erreur de streaming :', error));

Le choix de la méthode dépend de la tâche spécifique, des exigences de performance, de la nécessité de chargement asynchrone et du type de données de l'image.

Comment peut-on obtenir une image du serveur?