मैं HTML / जावास्क्रिप्ट में एक वेब पेज लिख रहा हूँ। मैं AJAX का उपयोग करके अपने बैकएंड से एक छवि डाउनलोड कर रहा हूं। छवि को कच्चे बाइट सरणी के रूप में दर्शाया गया है, URL नहीं, इसलिए मैं मानक का उपयोग नहीं कर सकता<img src="{url}"> दृष्टिकोण का ।
मैं उपयोगकर्ता को उल्लिखित छवि कैसे दिखाऊं?
जवाबों:
इस HTML स्निपेट को अपने सर्व किए गए दस्तावेज़ में डालने का प्रयास करें:
<img id="ItemPreview" src="">
फिर, जावास्क्रिप्ट पक्ष पर, आप srcतथाकथित डेटा URL के साथ छवि की विशेषता को गतिशील रूप से संशोधित कर सकते हैं ।
document.getElementById("ItemPreview").src = "data:image/png;base64," + yourByteArrayAsBase64;
वैकल्पिक रूप से, jQuery का उपयोग कर:
$('#ItemPreview').attr('src', `data:image/png;base64,${yourByteArrayAsBase64}`);
यह मानता है कि आपकी छवि PNG प्रारूप में संग्रहीत है, जो काफी लोकप्रिय है। यदि आप कुछ अन्य छवि प्रारूप (जैसे JPEG) का उपयोग करते हैं, तो URL में MIME प्रकार ( "image/..."भाग) को तदनुसार संशोधित करें ।
इसी तरह के सवाल:
[137,80,78,71,13,10,26,10,0,...], तो आप इस लाइन का उपयोग कर सकते हैं:document.getElementById("ItemPreview").src = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array([137,80,78,71,13,10,26,10,0,...])));