Serverdan qanday qilib rasm olish mumkin?

Frontendda serverdan rasm olishning bir nechta asosiy usullari mavjud:

1. <img> teg: Eng oddiy va keng tarqalgan usul. Rasm URLini ko'rsatish uchun src atributidan foydalanadi.

   <img src="/images/logo.png" alt="Kompaniya logosi">
   

2. CSS xususiyati background-image: Elementning fon rasmi sifatida joylashtirish uchun ishlatiladi.

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

3. AJAX (XMLHttpRequest yoki Fetch API): Rasmni asinxron ravishda olish imkonini beradi, odatda dinamik kontentni yangilash yoki rasm ma'lumotlarini manipulyatsiya qilish uchun (masalan, previewlar yaratish yoki mijoz tomonida ishlash). Olingan ma'lumotlar turli formatlarda bo'lishi mumkin (masalan, Base64).

   fetch('/api/image/123')
     .then(response => response.blob()) // Blob sifatida ma'lumotlarni olamiz
     .then(blob => {
       const imageUrl = URL.createObjectURL(blob); // Blob uchun URL yaratamiz
       const img = document.createElement('img');
       img.src = imageUrl;
       document.body.appendChild(img);
     })
     .catch(error => console.error('Rasm yuklashda xato:', error));
   

   Base64 formatidagi rasmni olish:

   fetch('/api/image/base64/123')
     .then(response => response.text()) // Matn (Base64 satr) sifatida ma'lumotlarni olamiz
     .then(base64String => {
       const img = document.createElement('img');
       img.src = 'data:image/png;base64,' + base64String; // PNG uchun misol
       document.body.appendChild(img);
     })
     .catch(error => console.error('Rasm yuklashda xato:', error));
   

4. WebSockets: Real vaqtda rasm olish uchun, masalan, streaming ilovalari yoki o'yinlarda. Rasm ikkilamchi ma'lumot sifatida uzatilishi mumkin.

   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> bilan drawImage: Rasm AJAX yoki <img> orqali yuklanib, keyin <canvas> elementiga chizilishi mumkin.

   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 yordamida): Katta rasmni ishlash yoki rasmni qism-qism uzatish uchun.

   fetch('/large-image-stream')
     .then(response => response.body)
     .then(reader => {
       // Rasm ma'lumotlar oqimini o'qish va ishlash
       // Masalan, TextDecoder yordamida matn yoki ArrayBuffer bilan ishlash
     })
     .catch(error => console.error('Stream xatosi:', error));
   

Usul tanlash aniq vazifaga, ishlash talablariga, asinxron yuklash ehtiyojiga va rasm ma'lumotlarining turiga bog'liq.