ब्राउज़र में Base64 छवि का सुरक्षित रूप से पूर्वावलोकन करें

एक विश्वसनीय छवि पूर्वावलोकन में दो अलग-अलग कार्य होते हैं: Base64 प्रतिनिधित्व को डीकोड करना और परिणामी छवि प्रारूप को डीकोड करना। एक स्ट्रिंग पहले चरण को पार कर सकती है और दूसरे चरण में विफल हो सकती है क्योंकि फ़ाइल को छोटा कर दिया गया है, गलत लेबल किया गया है या ब्राउज़र द्वारा असमर्थित है। उन राज्यों को अलग-अलग दिखाएँ।

बाइट-उन्मुख पाइपलाइन रखें

एक पार्सर के माध्यम से एक मान्यता प्राप्त डेटा URI रैपर को हटाएं, Base64 को मान्य करें, और एक Uint8Array प्राप्त करें। टेक्स्ट डिकोडर के माध्यम से छवि बाइट्स को रूट न करें। यदि आप एक सरल स्थानीय पूर्वावलोकन चाहते हैं, तो बाइट्स को ब्लॉब में लपेटें और एक ऑब्जेक्ट URL बनाएं। यह केवल परिणाम प्रदर्शित करने के लिए एक और बड़ी Base64 स्ट्रिंग को असेंबल करने से बचाता है।

// bytes is a validated Uint8Array; type comes from checked raster metadata.
async function previewRaster(bytes, type, imageElement) {
  const allowed = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
  if (!allowed.includes(type)) throw new Error('Unsupported raster preview type');
  const url = URL.createObjectURL(new Blob([bytes], { type }));
  try {
    imageElement.src = url;
    await imageElement.decode();
    return { width: imageElement.naturalWidth, height: imageElement.naturalHeight,
      dispose: () => URL.revokeObjectURL(url) };
  } catch (error) {
    URL.revokeObjectURL(url);
    imageElement.removeAttribute('src');
    throw error;
  }
}

ऑब्जेक्ट URL को केवल तब तक रखें जब तक आवश्यकता हो

पूर्वावलोकन को प्रतिस्थापित या हटाते समय लौटाए गए डिस्पोज़ फ़ंक्शन को कॉल करें। सफ़ाई के बिना बार-बार पूर्वावलोकन ब्राउज़र संसाधनों को बरकरार रखता है। छवि लोड होने से पहले URL को रद्द न करें, और बाद में डाउनलोड के लिए निपटाए गए URL का पुन: उपयोग न करें। यदि डाउनलोड उपलब्ध रहना चाहते हैं, तो उनके जीवनकाल को अलग से प्रबंधित करें।

वास्तविक छवि-डिकोडर फीडबैक का उपयोग करें

फ़ाइल हस्ताक्षर केवल एक प्रारंभिक संकेत है. छवि तत्व का डिकोड चरण यह जाँचता है कि ब्राउज़र वास्तव में इसे लोड कर सकता है या नहीं और इसके आयामों को उजागर करता है। यहां एक त्रुटि यह कहेगी कि निरीक्षण या डाउनलोड के लिए मूल बाइट्स को बनाए रखते समय छवि डिकोडिंग विफल रही। इसे इनपुट को अधिलेखित नहीं करना चाहिए या रिपोर्ट नहीं करनी चाहिए कि Base64 वर्णमाला अमान्य थी।

जहां संभव हो महंगी रेंडरिंग से पहले बाइट और आयाम सीमाएं लागू करें। एक छोटी संपीड़ित फ़ाइल एक बहुत बड़ी छवि का वर्णन कर सकती है। SVG को एक सामान्य रैस्टर पेलोड के रूप में मानने से बचें: यह विभिन्न सुरक्षा विचारों के साथ संरचित मार्कअप है। पूर्वावलोकन कार्य करने के लिए कभी भी अज्ञात SVG या HTML को सीधे पृष्ठ में इंजेक्ट न करें।

अंत में, पूर्वावलोकन को परिवर्तित करने से अलग करें। किसी छवि तत्व में JPEG प्रदर्शित करने से PNG नहीं बनता है। रूपांतरण के लिए एक कैनवास पर डिकोड की गई छवि को चित्रित करना और स्पष्ट गुणवत्ता और पारदर्शिता विकल्पों के साथ चुने गए प्रारूप को निर्यात करना आवश्यक है। डेटा URI रैपर में वर्णित है एमडीएन: डेटा यूआरएल; पूर्वावलोकन सफलता एक ब्राउज़र-प्रारूप जांच बनी रहती है, सामान्य सुरक्षा प्रमाणीकरण नहीं।