Sunucudan nasıl görüntü alınabilir?

Frontend'te sunucudan görüntü almanın birkaç temel yolu vardır:

1. <img> etiketi: En basit ve yaygın yöntemdir. src özniteliği kullanılarak görüntü URL'si belirtilir.

   <img src="/images/logo.png" alt="Şirket logosu">
   

2. CSS özelliği background-image: Bir öğenin arka planı olarak görüntü yerleştirmek için kullanılır.

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

3. AJAX (XMLHttpRequest veya Fetch API): Görüntüleri asenkron olarak almak, genellikle içerik güncellemeleri veya görüntü verileriyle manipülasyon yapmak için kullanılır (örneğin, önizleme oluşturma veya istemci tarafı işleme). Alınan veriler çeşitli formatlarda olabilir (örneğin, Base64).

   fetch('/api/image/123')
     .then(response => response.blob()) // Blob olarak veri al
     .then(blob => {
       const imageUrl = URL.createObjectURL(blob); // Blob için URL oluştur
       const img = document.createElement('img');
       img.src = imageUrl;
       document.body.appendChild(img);
     })
     .catch(error => console.error('Görüntü yüklenirken hata:', error));
   

   Base64 formatında görüntü alma:

   fetch('/api/image/base64/123')
     .then(response => response.text()) // Metin (Base64 string) olarak veri al
     .then(base64String => {
       const img = document.createElement('img');
       img.src = 'data:image/png;base64,' + base64String; // PNG örneği
       document.body.appendChild(img);
     })
     .catch(error => console.error('Görüntü yüklenirken hata:', error));
   

4. WebSockets: Gerçek zamanlı görüntü almak için, örneğin akış uygulamaları veya oyunlar gibi. Görüntüler ikili veri olarak iletilebilir.

   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> ile drawImage: Görüntüler AJAX veya <img> ile yüklenip, ardından <canvas> öğesine çizilebilir.

   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. Akış (ReadableStream kullanarak): Büyük görüntüleri işlemek veya parça parça iletmek için.

   fetch('/large-image-stream')
     .then(response => response.body)
     .then(reader => {
       // Görüntü veri akışını okuma ve işleme
       // Örneğin, TextDecoder kullanmak veya ArrayBuffer ile ikili verileri işlemek
     })
     .catch(error => console.error('Akış hatası:', error));
   

Yöntem seçimi, belirli göreve, performans gereksinimlerine, asenkron yükleme ihtiyacına ve görüntü verisinin türüne bağlıdır.