Jakými způsoby lze získat obrázek ze serveru…

Existuje několik základních způsobů, jak získat obrázky ze serveru na Frontendu:

Značka <img>: Nejjednodušší a nejrozšířenější způsob. Používá atribut src k určení URL obrázku.
```
<img src="/images/logo.png" alt="Logo společnosti">
```

CSS vlastnost background-image: Používá se k umístění obrázku jako pozadí prvku.

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

AJAX (XMLHttpRequest nebo Fetch API): Umožňuje načítat obrázky asynchronně, často pro dynamické aktualizace obsahu nebo manipulaci s daty obrázků (například pro vytváření náhledů nebo zpracování na klientovi). Získaná data mohou být v různých formátech (například Base64).

fetch('/api/image/123')
  .then(response => response.blob()) // Získává data jako Blob
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob); // Vytvoří URL pro Blob
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Chyba načítání obrázku:', error));

Získání obrázku ve formátu base64:

fetch('/api/image/base64/123')
  .then(response => response.text()) // Získává data jako text (řetězec Base64)
  .then(base64String => {
    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + base64String; // Příklad pro PNG
    document.body.appendChild(img);
  })
  .catch(error => console.error('Chyba načítání obrázku:', error));

WebSockets: Pro získávání obrázků v reálném čase, například v streamingových aplikacích nebo hrách. Obrázky mohou být přenášeny jako binární data.

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> s drawImage: Obrázky mohou být načteny přes AJAX nebo <img> a poté vykresleny na prvek <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 (s použitím ReadableStream): Pro zpracování velkých obrázků nebo přenos obrázků po částech.

fetch('/large-image-stream')
  .then(response => response.body)
  .then(reader => {
    // Čtení a zpracování proudu dat obrázku
    // Například lze použít TextDecoder pro text nebo zpracovat ArrayBuffer pro binární data
  })
  .catch(error => console.error('Chyba streamování:', error));

Výběr způsobu závisí na konkrétním úkolu, požadavcích na výkon, potřebě asynchronního načítání a typu dat obrázku.

Jakými způsoby lze získat obrázek ze serveru?