Kā var iegūt attēlu no servera?

Ir vairākas galvenās metodes, kā iegūt attēlus no servera Frontend:

1. <img> tags: Vienkāršākais un izplatītākais veids. Izmanto src atribūtu, lai norādītu attēla URL.

   <img src="/images/logo.png" alt="Uzņēmuma logo">
   

2. CSS īpašība background-image: Izmanto, lai novietotu attēlu kā elementa fonu.

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

3. AJAX (XMLHttpRequest vai Fetch API): Ļauj asenhroni iegūt attēlus, bieži dinamiskai satura atjaunināšanai vai attēla datu manipulācijām (piemēram, priekšskatījuma izveidei vai apstrādei klienta pusē). Iegūtie dati var būt dažādos formātos (piemēram, Base64).

   fetch('/api/image/123')
     .then(response => response.blob()) // Iegūst datus kā Blob
     .then(blob => {
       const imageUrl = URL.createObjectURL(blob); // Izveido URL no Blob
       const img = document.createElement('img');
       img.src = imageUrl;
       document.body.appendChild(img);
     })
     .catch(error => console.error('Kļūda, ielādējot attēlu:', error));
   

   Iegūt attēlu base64 formātā:

   fetch('/api/image/base64/123')
     .then(response => response.text()) // Iegūst datus kā tekstu (Base64 virkni)
     .then(base64String => {
       const img = document.createElement('img');
       img.src = 'data:image/png;base64,' + base64String; // Piemērs PNG formātam
       document.body.appendChild(img);
     })
     .catch(error => console.error('Kļūda, ielādējot attēlu:', error));
   

4. WebSockets: Lai saņemtu attēlus reāllaikā, piemēram, straumēšanas lietojumprogrammās vai spēlēs. Attēli var tikt pārsūtīti kā binārie dati.

   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> ar drawImage: Attēli var tikt ielādēti caur AJAX vai <img> un pēc tam uzzīmēti uz <canvas> elementa.

   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. Straumēšana (ar ReadableStream): Lai apstrādātu lielus attēlus vai pārsūtītu attēlus pa daļām.

   fetch('/large-image-stream')
     .then(response => response.body)
     .then(reader => {
       // Lasīšana un apstrāde ar straumi
       // Piemēram, var izmantot TextDecoder teksta apstrādei vai apstrādāt ArrayBuffer binārajiem datiem
     })
     .catch(error => console.error('Kļūda, straumēšanas laikā:', error));
   

Izvēle ir atkarīga no konkrētās uzdevuma, veiktspējas prasībām, nepieciešamības pēc asīnhronas ielādes un attēla datu veida.