Чӣ тавр метавон тасвирро аз сервер гирифт?

Ҳадди аққал чанд роҳи асосӣ барои гирифтани тасвирҳо аз сервер дар Frontend вуҷуд дорад:

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); // URL барои Blob эҷод мекунем
       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('Хатогии стриминг:', error));
   

Интихоби усул ба вазифаи мушаххас, талаботи иҷроиш, ниёз ба боркунии асинхрон ва навъи маълумоти тасвир вобаста аст.