როგორ შეიძლება სერვერიდან სურათი მიიღოთ?

ප්රධාන මාර්ග කිහිපයක් ඇත සේවක සේවාදායකයෙන් ඉදිරිපසට රූප ලබා ගැනීම සඳහා:

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));
   

විශේෂ කාර්යය, කාර්ය සාධන අවශ්‍යතා, අසංඛ්‍යාත ලෝඩ් කිරීමේ අවශ්‍යතාව සහ රූප දත්ත වර්ගය මත මාර්ගය තෝරාගත යුතුය.