Серверден сүрөттү кантип алууга болот?

Көптөгөн негизги ыкмалар бар серверден сүрөттөрдү алуу үчүн алдыңкы жакта:

1. <img> теги: Аңгыча жана кеңири колдонулган ыкма. src атрибутун колдонуп сүрөттүн URL'ин көрсөтөт:

   <img src="/images/logo.png" alt="Компаниянын логотиби">
   

2. CSS өзгөчөлүк background-image: Элементтин фон катары сүрөттү жайгаштыруу үчүн колдонулат.

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

3. AJAX (XMLHttpRequest же Fetch API): Асинхрон түрдө сүрөттөрдү алуу мүмкүнчүлүгүн берет, көбүнчө мазмунду динамикалык жаңылоо же сүрөттүн маалыматтарын иштетүү үчүн (мисалы, алдын ала көрүү түзүү же кардарда иштетүү). Алынган маалыматтар ар кандай форматта болушу мүмкүн (мисалы, Base64).

   fetch('/api/image/123')
     .then(response => response.blob()) // Маалыматты Blob катары алуу
     .then(blob => {
       const imageUrl = URL.createObjectURL(blob); // Blob үчүн URL түзүү
       const img = document.createElement('img');
       img.src = imageUrl;
       document.body.appendChild(img);
     })
     .catch(error => console.error('Сүрөттү жүктөөдө ката:', error));
   

   Base64 форматында сүрөттү алуу:

   fetch('/api/image/base64/123')
     .then(response => response.text()) // Маалыматты текст катары алуу (Base64 сапты)
     .then(base64String => {
       const img = document.createElement('img');
       img.src = 'data:image/png;base64,' + base64String; // PNG үчүн мисал
       document.body.appendChild(img);
     })
     .catch(error => console.error('Сүрөттү жүктөөдө ката:', error));
   

4. WebSockets: Реалдуу убакытта сүрөттөрдү алуу үчүн, мисалы, стриминг колдонмолордо же оюндарда. Сүрөттөр бинардык маалымат катары өткөрүлүшү мүмкүн.

   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> менен drawImage: Сүрөттөр AJAX аркылуу же <img> аркылуу жүктөлүп, андан кийин <canvas> элементине чийилет.

   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. Stream (ReadableStream колдонуу): Ири сүрөттөрдү иштетүү же сүрөттөрдү бөлүктөргө өткөрүү үчүн.

   fetch('/large-image-stream')
     .then(response => response.body)
     .then(reader => {
       // Сүрөттүн маалымат агымын окуу жана иштетүү
       // Мисалы, TextDecoder колдонуп текстке же ArrayBuffer менен иштетүү
     })
     .catch(error => console.error('Stream түзүүдө ката:', error));
   

Ысыктык ыкманы конкреттүү тапшырмага, иштөө талаптарына, асинхрон жүктөө зарылдыгына жана сүрөттүн түрүнө жараша тандоо керек.