W jaki sposób można uzyskać obraz z serwera?

Istnieje kilka głównych sposobów pobierania obrazów z serwera w frontend:

1. Tag <img>: Najprostszy i najpowszechniejszy sposób. Używa atrybutu src do wskazania URL obrazu.

   <img src="/images/logo.png" alt="Logo firmy">
   

2. Właściwość CSS background-image: Używana do umieszczania obrazu jako tła elementu.

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

3. AJAX (XMLHttpRequest lub Fetch API): Pozwala na asynchroniczne pobieranie obrazów, często do dynamicznej aktualizacji treści lub manipulacji danymi obrazu (np. do tworzenia podglądów lub przetwarzania po stronie klienta). Otrzymane dane mogą być w różnych formatach (np. Base64).

   fetch('/api/image/123')
     .then(response => response.blob()) // Otrzymujemy dane jako Blob
     .then(blob => {
       const imageUrl = URL.createObjectURL(blob); // Tworzymy URL dla Blob
       const img = document.createElement('img');
       img.src = imageUrl;
       document.body.appendChild(img);
     })
     .catch(error => console.error('Błąd ładowania obrazu:', error));
   

   Pobieranie obrazu w formacie base64:

   fetch('/api/image/base64/123')
     .then(response => response.text()) // Otrzymujemy dane jako tekst (łańcuch Base64)
     .then(base64String => {
       const img = document.createElement('img');
       img.src = 'data:image/png;base64,' + base64String; // Przykład dla PNG
       document.body.appendChild(img);
     })
     .catch(error => console.error('Błąd ładowania obrazu:', error));
   

4. WebSockets: Do pobierania obrazów w czasie rzeczywistym, np. w aplikacjach streamingowych lub grach. Obrazy mogą być przesyłane jako dane binarne.

   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);
     }
   };
   

5. <canvas> z drawImage: Obrazy mogą być ładowane przez AJAX lub <img> i następnie rysowane na elemencie <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';
   

6. Streaming (z użyciem ReadableStream): Do obsługi dużych obrazów lub przesyłania obrazów partiami.

   fetch('/large-image-stream')
     .then(response => response.body)
     .then(reader => {
       // Odczyt i przetwarzanie strumienia danych obrazu
       // Na przykład można użyć TextDecoder do tekstu lub przetwarzać ArrayBuffer dla danych binarnych
     })
     .catch(error => console.error('Błąd strumieniowania:', error));
   

Wybór metody zależy od konkretnego zadania, wymagań dotyczących wydajności, konieczności asynchronicznego ładowania i typu danych obrazu.