डेटा सपोर्ट: इंटरनेट एक्सप्लोरर यूआरएल

बहुत से लोग छवियों को प्रदर्शित करने के इस तरीके को जानते हैं, लेकिन यह विशेष रूप से लोकप्रिय नहीं है, क्योंकि इसे इंटरनेट एक्सप्लोरर (IE 6.7) में प्रदर्शित करने में समस्या है - वे समझ नहीं पाते हैं कि उन्हें क्या दिया जाता है। और IE8 - केवल 32kb से छोटी छवियों को स्वीकार करता है)।



इस समस्या को कैसे हल करें?



RFC 2397 के अनुसार, एक चित्र (किसी भी अन्य डेटा की तरह) को निम्नलिखित प्रारूप में प्रस्तुत किया जाना चाहिए:

data:[<mediatype>][;base64],<data>

हम अधिक विस्तार से वाक्य रचना का अध्ययन करते हैं:

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data

mediatype := [ type "/" subtype ] *( ";" parameter )

data := *urlchar

parameter := attribute "=" value







यहाँ क्या दिलचस्प है? तथ्य यह है कि मेडियाटाइप में अतिरिक्त पैरामीटर (उदाहरण के लिए, चारसेट) हो सकते हैं।

तदनुसार, कोई भी हमें इसमें अपना डेटा संग्रहीत करने के लिए मना नहीं करता है।

मैं यह सब क्यों हूँ?

इंटरनेट एक्सप्लोरर बेस 64-एनकोडेड चित्र नहीं पढ़ सकता है, लेकिन अगर हम उनके यूआरएल को निर्दिष्ट करते हैं तो यह आसानी से लोड हो सकता है।

तो क्या होगा यदि आप url को सीधे mediatype में निर्दिष्ट करें?



आप इसे लगभग इस प्रकार कर सकते हैं:

data:image/png;src=habr.png;_base64_...







यह सब, ज़ाहिर है, बहुत अच्छा और दिलचस्प है, लेकिन IE कैसे समझता है कि अतिरिक्त पैरामीटर हमारी तस्वीर है?



मैं व्यवहार का उपयोग करने का सुझाव देता हूं।

यह सीएसएस विशेषता केवल इंटरनेट एक्सप्लोरर में समर्थित है और पीएनजीफिक्स (इसके कार्यान्वयन में से एक) के रूप में इस तरह की परियोजना के लिए कई द्वारा जानी जाती है।



यह कुछ इस तरह दिखाई देगा ( सीएसएस कोड ):

#A {

background-image: url(data:image/png;src=habr.png;_base64_...);

behavior: url(ieb64.htc);

}









और यह ieb64.htc कोड है:

< public:attach event ="ondocumentready" onevent ="ondocumentready()" />

< script type ="text/javascript" >

function ondocumentready() {

this .style.backgroundImage =

this .currentStyle

.backgroundImage

.replace(

/^url\s*\(\s*\ "?\s*data:[^;]+;src=([^;]+);.*$/,

function(all, url) {

return " url(\ "" + url + "\")" ;

}

);

}

</ script >

यहां डेमो देखें।

और यहाँ आप htc फ़ाइल डाउनलोड कर सकते हैं।



पढ़ने के लिए धन्यवाद!