Hogyan lehet képet szerezni a szerverről?

Az alábbiakban néhány fő módszer található a szerverről származó képek lekérésére a Frontendben:

1. <img> tag: A legegyszerűbb és legelterjedtebb módszer. Az src attribútumot használja a kép URL-jének megadására.

   <img src="/images/logo.png" alt="Cég logója">
   

2. CSS background-image tulajdonság: Elem háttérképeként való elhelyezéshez használható.

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

3. AJAX (XMLHttpRequest vagy Fetch API): Aszinkron módon lehet képeket lekérni, gyakran dinamikus tartalomfrissítéshez vagy képadatok manipulálásához (pl. előnézet készítése vagy kliens oldali feldolgozás). A kapott adatok különböző formátumokban lehetnek (pl. Base64).

   fetch('/api/image/123')
     .then(response => response.blob()) // Blob-ként kapjuk az adatokat
     .then(blob => {
       const imageUrl = URL.createObjectURL(blob); // Blob URL létrehozása
       const img = document.createElement('img');
       img.src = imageUrl;
       document.body.appendChild(img);
     })
     .catch(error => console.error('Hiba a kép betöltésekor:', error));
   

   Kép betöltése base64 formátumban:

   fetch('/api/image/base64/123')
     .then(response => response.text()) // Szövegként kapjuk az adatokat (Base64 string)
     .then(base64String => {
       const img = document.createElement('img');
       img.src = 'data:image/png;base64,' + base64String; // Példa PNG-hez
       document.body.appendChild(img);
     })
     .catch(error => console.error('Hiba a kép betöltésekor:', error));
   

4. WebSockets: Valós idejű képek fogadására, például streaming alkalmazásokban vagy játékokban. A képek bináris adatként továbbíthatók.

   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> a drawImage-tel: A képek betölthetők AJAX vagy <img> segítségével, majd a <canvas> elemre rajzolhatók.

   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 (ReadableStream használatával): Nagyobb képek feldolgozására vagy részletekben történő továbbítására.

   fetch('/large-image-stream')
     .then(response => response.body)
     .then(reader => {
       // A kép adatfolyam olvasása és feldolgozása
       // Például TextDecoder használata szöveghez vagy ArrayBuffer feldolgozása bináris adatokhoz
     })
     .catch(error => console.error('Áramlási hiba:', error));
   

A módszer kiválasztása a konkrét feladattól, a teljesítményigényektől, az aszinkron betöltés szükségességétől és a kép adatainak típusától függ.