Cum se poate obține o imagine de pe server?

Există mai multe moduri principale de a obține imagini de pe server în frontend:

1. Eticheta <img>: Cel mai simplu și comun mod. Utilizează atributul src pentru a indica URL-ul imaginii.

   <img src="/images/logo.png" alt="Logo companie">
   

2. Proprietatea CSS background-image: Folosită pentru plasarea unei imagini ca fundal al unui element.

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

3. AJAX (XMLHttpRequest sau Fetch API): Permite obținerea imaginilor asincron, adesea pentru actualizarea dinamică a conținutului sau manipularea datelor imaginii (de exemplu, pentru previzualizări sau procesare pe client). Datele obținute pot fi în diferite formate (de exemplu, Base64).

   fetch('/api/image/123')
     .then(response => response.blob()) // Obținem datele ca Blob
     .then(blob => {
       const imageUrl = URL.createObjectURL(blob); // Creăm un URL pentru Blob
       const img = document.createElement('img');
       img.src = imageUrl;
       document.body.appendChild(img);
     })
     .catch(error => console.error('Eroare la încărcarea imaginii:', error));
   

   Obținerea imaginii în format base64:

   fetch('/api/image/base64/123')
     .then(response => response.text()) // Obținem datele ca text (șir Base64)
     .then(base64String => {
       const img = document.createElement('img');
       img.src = 'data:image/png;base64,' + base64String; // Exemplu pentru PNG
       document.body.appendChild(img);
     })
     .catch(error => console.error('Eroare la încărcarea imaginii:', error));
   

4. WebSockets: Pentru obținerea imaginilor în timp real, de exemplu, în aplicații de streaming sau jocuri. Imaginile pot fi transmise ca date binare.

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

5. <canvas> cu drawImage: Imaginile pot fi încărcate prin AJAX sau <img> și apoi desenate pe un 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';
   

6. Streaming (folosind ReadableStream): Pentru procesarea imaginilor mari sau transmiterea imaginilor pe bucăți.

   fetch('/large-image-stream')
     .then(response => response.body)
     .then(reader => {
       // Citirea și procesarea fluxului de date al imaginii
       // De exemplu, se poate folosi TextDecoder pentru text sau se poate procesa ArrayBuffer pentru date binare
     })
     .catch(error => console.error('Eroare de streaming:', error));
   

Alegerea metodei depinde de sarcina specifică, de cerințele de performanță, de necesitatea încărcării asincrone și de tipul de date al imaginii.