Kaip galima gauti vaizdą iš serverio?

Yra keletas pagrindinių būdų gauti vaizdus iš serverio priekinėje dalyje:

1. <img> žymė: Paprasčiausias ir plačiausiai naudojamas būdas. Naudoja src atributą vaizdo URL nurodymui.

   <img src="/images/logo.png" alt="Įmonės logotipas">
   

2. CSS savybė background-image: Naudojama kaip elemento fono vaizdas.

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

3. AJAX (XMLHttpRequest arba Fetch API): Leidžia asinchroniškai gauti vaizdus, dažnai dinamiškai atnaujinant turinį arba manipuliuojant vaizdo duomenimis (pvz., kuriant peržiūrą ar apdorojant kliento pusėje). Gauti duomenys gali būti įvairiuose formatuose (pvz., Base64).

   fetch('/api/image/123')
     .then(response => response.blob()) // Gauti duomenis kaip Blob
     .then(blob => {
       const imageUrl = URL.createObjectURL(blob); // Sukurti URL iš Blob
       const img = document.createElement('img');
       img.src = imageUrl;
       document.body.appendChild(img);
     })
     .catch(error => console.error('Klaida įkeliant vaizdą:', error));
   

   Gauti vaizdą base64 formatu:

   fetch('/api/image/base64/123')
     .then(response => response.text()) // Gauti duomenis kaip tekstą (Base64 eilutę)
     .then(base64String => {
       const img = document.createElement('img');
       img.src = 'data:image/png;base64,' + base64String; // Pavyzdys PNG
       document.body.appendChild(img);
     })
     .catch(error => console.error('Klaida įkeliant vaizdą:', error));
   

4. WebSockets: Gauti vaizdus realiu laiku, pvz., srautinėse programose ar žaidimuose. Vaizdai gali būti perduodami kaip dvejetainiai duomenys.

   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> su drawImage: Vaizdai gali būti įkelti per AJAX arba <img> ir tada nupiešti ant <canvas> elemento.

   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. Srautas (ReadableStream naudojimas): Didelių vaizdų apdorojimui arba vaizdų perdavimui dalimis.

   fetch('/large-image-stream')
     .then(response => response.body)
     .then(reader => {
       // Skaityti ir apdoroti vaizdo duomenų srautą
       // Pavyzdžiui, naudoti TextDecoder tekstui arba apdoroti ArrayBuffer dvejetainiams duomenims
     })
     .catch(error => console.error('Srauto klaida:', error));
   

Pasirinktas būdas priklauso nuo konkrečios užduoties, našumo reikalavimų, asinchroninio įkėlimo poreikio ir vaizdo duomenų tipo.