По какви начини може да се получи изображение от…

Има няколко основни начина за получаване на изображения от сървъра във Frontend:

Таг <img>: Най-простият и разпространен начин. Използва атрибута src за указване на URL на изображението.
```
<img src="/images/logo.png" alt="Лого на компанията">
```
CSS свойство background-image: Използва се за поставяне на изображение като фон на елемент.
```
.hero-section {
  background-image: url('/images/hero.jpg');
  background-size: cover;
}
```

AJAX (XMLHttpRequest или Fetch API): Позволява асинхронно получаване на изображения, често за динамично обновяване на съдържание или манипулации с данни за изображението (например за създаване на преглед или обработка на клиента). Получените данни могат да бъдат в различни формати (например Base64).

fetch('/api/image/123')
  .then(response => response.blob()) // Получаване на данните като Blob
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob); // Създаване на URL за Blob
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Грешка при зареждане на изображението:', error));

Получаване на изображение във формат base64:

fetch('/api/image/base64/123')
  .then(response => response.text()) // Получаване на данните като текст (Base64 низ)
  .then(base64String => {
    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + base64String; // Пример за PNG
    document.body.appendChild(img);
  })
  .catch(error => console.error('Грешка при зареждане на изображението:', error));

WebSockets: За получаване на изображения в реално време, например в стрийминг приложения или игри. Изображенията могат да бъдат предавани като бинарни данни.

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> с drawImage: Изображения могат да бъдат заредени чрез AJAX или <img> и след това да бъдат нарисувани на елемента <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): За обработка на големи изображения или предаване на изображения на части.

fetch('/large-image-stream')
  .then(response => response.body)
  .then(reader => {
    // Четене и обработка на потока данни за изображението
    // Например, може да се използва TextDecoder за текст или да се обработва ArrayBuffer за бинарни данни
  })
  .catch(error => console.error('Грешка при стрийминг:', error));

Изборът на метод зависи от конкретната задача, изискванията за производителност, необходимостта от асинхронно зареждане и типа на данните за изображението.

По какви начини може да се получи изображение от сървъра?