Akými spôsobmi je možné získať obrázok zo servera…

Existuje niekoľko základných spôsobov, ako získať obrázky zo servera na Frontende:

<img> tag: Najjednoduchší a najrozšírenejší spôsob. Používa atribút src na určenie URL obrázka.
```
<img src="/images/logo.png" alt="Logo spoločnosti">
```

CSS vlastnosť background-image: Používa sa na umiestnenie obrázka ako pozadia prvku.

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

AJAX (XMLHttpRequest alebo Fetch API): Umožňuje načítavať obrázky asynchrónne, často na dynamické aktualizácie obsahu alebo manipulácie s dátami obrázka (napríklad na vytvorenie náhľadu alebo spracovanie na klientovi). Získané dáta môžu byť v rôznych formátoch (napríklad Base64).

fetch('/api/image/123')
  .then(response => response.blob()) // Získavame dáta ako Blob
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob); // Vytvárame URL pre Blob
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Chyba načítania obrázka:', error));

Získanie obrázka vo formáte base64:

fetch('/api/image/base64/123')
  .then(response => response.text()) // Získavame dáta ako text (Base64 reťazec)
  .then(base64String => {
    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + base64String; // Príklad pre PNG
    document.body.appendChild(img);
  })
  .catch(error => console.error('Chyba načítania obrázka:', error));

WebSockets: Na získavanie obrázkov v reálnom čase, napríklad v streamingových aplikáciách alebo hrách. Obrázky môžu byť prenesené ako binárne dáta.

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 môžu byť načítané cez AJAX alebo <img> a následne nakreslené na prvok <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 (ReadableStream): Na spracovanie veľkých obrázkov alebo prenos obrázkov po častiach.

fetch('/large-image-stream')
  .then(response => response.body)
  .then(reader => {
    // Čítanie a spracovanie prúdu dát obrázka
    // Napríklad, môže sa použiť TextDecoder pre text alebo spracovať ArrayBuffer pre binárne dáta
  })
  .catch(error => console.error('Chyba streamovania:', error));

Výber spôsobu závisí od konkrétneho úlohy, požiadaviek na výkon, potreby asynchrónneho načítania a typu dát obrázka.

Akými spôsobmi je možné získať obrázok zo servera?