Με ποιους τρόπους μπορεί κανείς να λάβει μια εικόνα…

Υπάρχουν μερικοί βασικοί τρόποι λήψης εικόνων από τον διακομιστή στο 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: Για λήψη εικόνων σε πραγματικό χρόνο, π.χ. σε εφαρμογές streaming ή παιχνίδια. Οι εικόνες μπορούν να μεταδοθούν ως δυαδικά δεδομένα.

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

Η επιλογή της μεθόδου εξαρτάται από την συγκεκριμένη εργασία, τις απαιτήσεις απόδοσης, την ανάγκη ασύγχρονης φόρτωσης και τον τύπο δεδομένων εικόνας.

Με ποιους τρόπους μπορεί κανείς να λάβει μια εικόνα από τον διακομιστή;