Kuidas saab serverist pilti saada?

On olemas mitu peamist viisi, kuidas saada pilte serverilt Frontendis:

1. <img>-tähis: Kõige lihtsam ja levinum viis. Kasutab src atribuuti, et näidata pildi URL-i.

   <img src="/images/logo.png" alt="Ettevõtte logo">
   

2. CSS omadus background-image: Kasutatakse pildi asetamiseks elemendi taustaks.

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

3. AJAX (XMLHttpRequest või Fetch API): Annab võimaluse saada pilte asünkroonselt, sageli sisu dünaamiliseks uuendamiseks või pildandmete töötlemiseks (näiteks eelvaate loomine või kliendi poolel töötlemine). Saadud andmed võivad olla erinevates formaatides (näiteks Base64).

   fetch('/api/image/123')
     .then(response => response.blob()) // Saadab andmed Blobina
     .then(blob => {
       const imageUrl = URL.createObjectURL(blob); // Loob URL Blobist
       const img = document.createElement('img');
       img.src = imageUrl;
       document.body.appendChild(img);
     })
     .catch(error => console.error('Viga pildi laadimisel:', error));
   

   Pildi saamine base64 formaadis:

   fetch('/api/image/base64/123')
     .then(response => response.text()) // Saadab andmed tekstina (Base64 string)
     .then(base64String => {
       const img = document.createElement('img');
       img.src = 'data:image/png;base64,' + base64String; // Näiteks PNG
       document.body.appendChild(img);
     })
     .catch(error => console.error('Viga pildi laadimisel:', error));
   

4. WebSockets: Piltide saamiseks reaalajas, näiteks voogedastusteenustes või mängudes. Pildid võivad edastada binaarandmetena.

   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> koos drawImage: Pildid võivad olla laetud AJAX-i või <img> kaudu ning seejärel joonistatud <canvas>-ile.

   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. Straming (kasutades ReadableStream): Suurte piltide töötlemiseks või piltide osadeks saatmiseks.

   fetch('/large-image-stream')
     .then(response => response.body)
     .then(reader => {
       // Pildi andmete voogude lugemine ja töötlemine
       // Näiteks saab kasutada TextDecoder teksti töötlemiseks või ArrayBuffer binaarandmete töötlemiseks
     })
     .catch(error => console.error('Viga voogedastuse ajal:', error));
   

Valik sõltub konkreetse ülesande, jõudluse nõuete, asünkroonse laadimise vajaduse ja pildiandmete tüübi järgi.