Na koje načine se može dobiti slika sa servera…

Postoji nekoliko osnovnih načina za dobijanje slika sa servera na Frontendu:

<img> tag: Najjednostavniji i najrašireniji način. Koristi atribut src za navođenje URL-a slike.
```
<img src="/images/logo.png" alt="Logotip kompanije">
```

CSS svojstvo background-image: Koristi se za postavljanje slike kao pozadine elementa.

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

AJAX (XMLHttpRequest ili Fetch API): Omogućava asinhrono dobijanje slika, često za dinamičko osvežavanje sadržaja ili manipulaciju sa podacima slike (npr. za kreiranje pregleda ili obradu na klijentu). Dobijeni podaci mogu biti u različitim formatima (npr. Base64).

fetch('/api/image/123')
  .then(response => response.blob()) // Dobijanje podataka kao Blob
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob); // Kreiranje URL-a za Blob
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Greška pri učitavanju slike:', error));

Dobijanje slike u formatu base64:

fetch('/api/image/base64/123')
  .then(response => response.text()) // Dobijanje podataka kao teksta (Base64 string)
  .then(base64String => {
    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + base64String; // Primer za PNG
    document.body.appendChild(img);
  })
  .catch(error => console.error('Greška pri učitavanju slike:', error));

WebSockets: Za dobijanje slika u realnom vremenu, na primer u streaming aplikacijama ili igrama. Slike mogu biti prenete kao binarni podaci.

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> sa drawImage: Slike mogu biti učitane putem AJAX ili <img> i zatim nacrtane na element <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): Za obradu velikih slika ili prenos slika u delovima.

fetch('/large-image-stream')
  .then(response => response.body)
  .then(reader => {
    // Čitanje i obrada toka podataka slike
    // Na primer, može se koristiti TextDecoder za tekst ili obraditi ArrayBuffer za binarne podatke
  })
  .catch(error => console.error('Greška pri streamovanju:', error));

Izbor metode zavisi od konkretne zadatka, zahteva za performanse, potrebe za asinhronim učitavanjem i tipa podataka slike.

Na koje načine se može dobiti slika sa servera?