Serverdən şəkil necə əldə etmək olar?

Frontend-də serverdən şəkillər almağın bir neçə əsas yolu var:

1. <img> etiketi: Ən sadə və yaygın üsul. src atributu vasitəsilə şəkilin URL-sini göstərir.

   <img src="/images/logo.png" alt="Şirkət loqosu">
   

2. CSS xüsusiyyəti background-image: Bir elementin fonu kimi şəkil yerləşdirmək üçün istifadə olunur.

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

3. AJAX (XMLHttpRequest və ya Fetch API): Şəkilləri asinxron şəkildə almağa imkan verir, adətən dinamik məzmunu yeniləmək və ya şəkil məlumatları ilə manipulyasiya etmək üçün (məsələn, önizləmə və ya müştəri tərəfində emal üçün). Alınan məlumatlar müxtəlif formatlarda ola bilər (məsələn, Base64).

   fetch('/api/image/123')
     .then(response => response.blob()) // Blob kimi məlumat alırıq
     .then(blob => {
       const imageUrl = URL.createObjectURL(blob); // Blob üçün URL yaradırıq
       const img = document.createElement('img');
       img.src = imageUrl;
       document.body.appendChild(img);
     })
     .catch(error => console.error('Şəkil yükləmədə xəta:', error));
   

   Base64 formatında şəkil alma:

   fetch('/api/image/base64/123')
     .then(response => response.text()) // Mətni (Base64 sətiri) kimi məlumat alırıq
     .then(base64String => {
       const img = document.createElement('img');
       img.src = 'data:image/png;base64,' + base64String; // PNG üçün nümunə
       document.body.appendChild(img);
     })
     .catch(error => console.error('Şəkil yükləmədə xəta:', error));
   

4. WebSockets: Canlı vaxtda şəkil almaq üçün, məsələn, streaming tətbiqləri və ya oyunlarda. Şəkillər ikili məlumat kimi ötürülə bilər.

   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> ilə drawImage: Şəkillər AJAX və ya <img> vasitəsilə yüklənə bilər və sonra <canvas> elementində çəkilə bilər.

   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 istifadə edərək): Böyük şəkilləri işləmək və ya şəkilləri hissə-hissə ötürmək üçün.

   fetch('/large-image-stream')
     .then(response => response.body)
     .then(reader => {
       // Şəkil məlumat axını oxuma və işləmə
       // Məsələn, TextDecoder istifadə etmək və ya ArrayBuffer ilə işləmək
     })
     .catch(error => console.error('Stream xətası:', error));
   

Yöntəm seçimi konkret tapşırığa, performans tələblərinə, asinxron yükləməyə ehtiyac və şəkil məlumatlarının növünə bağlıdır.