टाइप किए गए सरणियों का उपयोग करके बाइनरी डेटा के साथ काम करना

एचटीएमएल 5 के साथ, नए एपीआई वेब विकास का विस्तार कर रहे हैं जो यूएक्स का विस्तार करते हैं, नए मल्टीमीडिया और वास्तविक समय की कनेक्टिविटी लाते हैं। अक्सर यह कार्यक्षमता बाइनरी फ़ाइल स्वरूपों जैसे एमपी 3-ऑडियो, पीएनजी-छवियों के उपयोग से जुड़ी होती है
या MP4 वीडियो। इस संदर्भ में बाइनरी फ़ाइलों का उपयोग बेहद महत्वपूर्ण है, क्योंकि यह आपको चैनल चौड़ाई के लिए आवश्यकताओं को कम करने, आवश्यक प्रदर्शन प्राप्त करने और एक ही समय में मौजूदा प्रौद्योगिकियों के साथ संगत रहने की अनुमति देता है। हाल तक तक, वेब डेवलपर्स के पास इन बाइनरी फ़ाइलों या किसी अन्य बाइनरी फ़ाइल स्वरूपों की सामग्री तक सीधी पहुंच नहीं थी।

इस लेख में, हम देखेंगे कि वेब डेवलपर इस अवरोध का उपयोग करके कैसे निकाल सकते हैं
जावास्क्रिप्ट के लिए टाइप किए गए एपीआई , और IE टेस्ट ड्राइव पर बाइनरी फ़ाइल इंस्पेक्टर डेमो में नए एपीआई का उपयोग करना।

IE10 प्लेटफ़ॉर्म पूर्वावलोकन 4 में उपलब्ध टाइप किए गए सरणियाँ वेब एप्लिकेशन को बाइनरी फ़ाइलों की एक विस्तृत श्रृंखला के साथ काम करने और सीधे ब्राउज़र फ़ाइलों द्वारा समर्थित बाइनरी सामग्री के साथ काम करने की अनुमति देते हैं। टाइप किए गए एरेज़ सपोर्ट को IE10 भर में जोड़ा गया है: जावास्क्रिप्ट में, XMLHttpRequest में, फ़ाइल एपीआई में और स्ट्रीम एपीआई में।

बाइनरी फ़ाइल इंस्पेक्टर

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



ऊपर दिए गए उदाहरण में .mp4 वीडियो को बाईं ओर <वीडियो> तत्व का उपयोग करके प्रदान किया गया है, और फ़ाइल की द्विआधारी सामग्री को हेक्साडेसिमल (HEX) प्रारूप में दाईं ओर प्रदर्शित किया जाता है और इसी ASCII वर्णों के रूप में। इस उदाहरण में, आप एमपीईजी फ़ाइलों के लिए विशिष्ट कई तत्व देख सकते हैं, जैसे "mp4" के लिए "ftyp"।

टाइप एरे और एरेबफर्स

टाइप किए गए सरणियाँ एक विशेष टाइप किए गए प्रतिनिधित्व के माध्यम से कच्चे बाइनरी सामग्री पर एक नज़र डालने का अवसर प्रदान करते हैं। उदाहरण के लिए, यदि हम बाइट डेटा स्ट्रीम को बाइट ऐरे के रूप में देखना चाहते हैं, तो हम यूंट 8 एयर का उपयोग कर सकते हैं (यूआईटी 8 एक 8-बिट अहस्ताक्षरित पूर्णांक मान का वर्णन करता है, जिसे आमतौर पर बाइट कहा जाता है)। यदि हम फ्लोटिंग-पॉइंट नंबरों की एक सरणी के रूप में कच्चे डेटा को पढ़ना चाहते हैं, तो हम फ्लोट 32 एयर (फ्लोट 32 IEE754 मानक के अनुसार 32-बिट फ़्लोटिंग-पॉइंट संख्या का वर्णन करता है) का उपयोग कर सकते हैं। निम्न प्रकार समर्थित हैं:

सरणी प्रकार	आइटम का आकार और विवरण
Int8Array	8-बिट हस्ताक्षरित पूर्णांक
Uint8Array	8-बिट अहस्ताक्षरित पूर्णांक
Int16Array	16-बिट हस्ताक्षरित पूर्णांक
Uint16Array	16-बिट अहस्ताक्षरित पूर्णांक
Int32Array	32-बिट हस्ताक्षरित पूर्णांक
Uint32Array	32-बिट अहस्ताक्षरित पूर्णांक
फ्लोट32 सरणी	32-बिट IEEE754 फ्लोटिंग पॉइंट नंबर
फ्लोट64 सरणी	64-बिट IEEE754 फ्लोटिंग पॉइंट नंबर

प्रत्येक प्रकार की सरणी ArrayBuffer के लिए एक प्रतिनिधित्व है। ArrayBuffer एक बाइनरी डेटा स्ट्रीम का एक संदर्भ है, लेकिन यह डेटा के साथ बातचीत करने के किसी भी प्रत्यक्ष तरीके का प्रतिनिधित्व नहीं करता है। एक ArrayBuffer के लिए एक TypedArray दृश्य बनाना द्विआधारी सामग्री तक पहुंच पढ़ना और लिखना प्रदान करता है।


नीचे दिया गया उदाहरण स्क्रैच से एक नया ArrayBuffer बनाता है और विभिन्न तरीकों से इसकी सामग्री की व्याख्या करता है:

// Create an 8 byte buffer var buffer = new ArrayBuffer(8); // View as an array of Uint8s and put 0x05 in each byte var uint8s = new Uint8Array(buffer); for (var i = 0; i < 8; i++) { uint8s[i] = 5; // fill each byte with 0x05 } // Inspect the resulting array uint8s[0] === 5; // true - each byte has value 5 uint8s.byteLength === 8; // true - there are 8 Uint8s // View the same buffer as an array of Uint32s var uint32s = new Uint32Array(buffer); // The same raw bytes are now interpreted differently uint32s[0] === 84215045 // true - 0x05050505 == 84215045 

इस प्रकार, टाइप किए गए सरणियों का उपयोग कार्यों के लिए किया जा सकता है जैसे कि डेटा संरचनाओं के निर्माण के लिए उनके बाइट-बाय-घटक घटकों से फ्लोटिंग-पॉइंट मान बनाने के लिए दक्षता और संगतता के आधार पर विशिष्ट डेटा संरचना की आवश्यकता होती है।

बाइनरी फ़ाइलों को पढ़ने के लिए टाइप किए गए एरर्स

टाइप किए गए सरणियों द्वारा संभव बनाया गया एक महत्वपूर्ण नया परिदृश्य बाइनरी फ़ाइलों की सामग्री को पढ़ना और प्रदर्शित करना है जो सीधे ब्राउज़र द्वारा समर्थित नहीं हैं। ऊपर वर्णित विभिन्न टाइप किए गए सरणियों के साथ, टाइप किए गए एरे भी एक विशेष DataView ऑब्जेक्ट प्रदान करता है, जिसका उपयोग किसी ArrayBuffer की सामग्री को अनस्ट्रक्चर्ड तरीके से पढ़ने और लिखने के लिए किया जा सकता है। यह नए फ़ाइल स्वरूपों को पढ़ने के लिए अच्छी तरह से अनुकूल है जो आमतौर पर मिश्रित डेटा प्रकारों के शीर्ष पर बनाए जाते हैं।

बाइनरी फाइल इंस्पेक्टर PCX फ़ाइलों को पढ़ने और एक <कैनवास> तत्व का उपयोग करके उन्हें रेंडर करने के लिए एक DataView का उपयोग करता है। निम्नलिखित एक सरलीकृत संस्करण है जो डेमो फ़ाइल हेडर को पढ़ने के लिए करता है, जिसमें चौड़ाई और ऊंचाई, डीपीआई और रंग गहराई (बिट्स-प्रति-पिक्सेल) के बारे में जानकारी प्राप्त करना शामिल है।

 var buffer = getPCXFileContents(); var reader = new DataView(buffer); // Read the header of the PCX file var header = {}; // The first section is single bytes header.manufacturer = reader.getUint8(0); header.version = reader.getUint8(1); header.encoding = reader.getUint8(2); header.bitsPerPixel = reader.getUint8(3); // The next section is Int16 values, each in little-endian header.xmin = reader.getInt16(4, true); header.ymin = reader.getInt16(6, true); header.xmax = reader.getInt16(8, true); header.ymax = reader.getInt16(10, true); header.hdpi = reader.getInt16(12, true); header.vdpi = reader.getInt16(14, true); 

ऊपर दिए गए कोड के समान कोड का उपयोग नई फ़ाइल प्रकारों की एक विस्तृत श्रृंखला के लिए ब्राउज़र रेंडरिंग समर्थन को जोड़ने के लिए किया जा सकता है, जिसमें मूल छवि प्रारूप, अतिरिक्त वीडियो फ़ाइल प्रारूप और एक विशेष क्षेत्र के लिए विशिष्ट डेटा प्रारूप शामिल हैं।

XHR और फ़ाइल API के माध्यम से बाइनरी डेटा को पुनर्प्राप्त करना

फ़ाइलों की सामग्री के साथ काम करने के लिए टाइप किए गए Arrays API का उपयोग करने से पहले हमें कच्चे डेटा तक पहुंचने के लिए उपयुक्त ब्राउज़र APIs का उपयोग करना होगा। सर्वर से फाइलों तक पहुंच के लिए, XMLHttpRequest API को विभिन्न प्रकार की प्रतिक्रिया (responseType) के लिए समर्थन के साथ विस्तारित किया गया था। तो "arraybuffer" के रूप में उत्तर जावास्क्रिप्ट के लिए ArrayBuffer ऑब्जेक्ट के रूप में सर्वर से अनुरोधित संसाधन की सामग्री का प्रतिनिधित्व करता है। समर्थित "बूँद", "पाठ" और "दस्तावेज़" प्रतिक्रियाएँ भी हैं।

 function getServerFileToArrayBufffer(url, successCallback) { // Create an XHR object var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == xhr.DONE) { if (xhr.status == 200 && xhr.response) { // The 'response' property returns an ArrayBuffer successCallback(xhr.response); } else { alert("Failed to download:" + xhr.status + " " + xhr.statusText); } } } // Open the request for the provided url xhr.open("GET", url, true); // Set the responseType to 'arraybuffer' for ArrayBuffer response xhr.responseType = "arraybuffer"; xhr.send(); } 

कई मामलों में, फ़ाइलों को उपयोगकर्ता द्वारा चुना जा सकता है, उदाहरण के लिए, मेल के लिए वेब क्लाइंट में एक पत्र के लिए अनुलग्नक के रूप में। फ़ाइल एपीआई वेब डेवलपर्स को <इनपुट> तत्व के माध्यम से निर्दिष्ट फ़ाइलों की सामग्री को पढ़ने और छोड़ने या किसी अन्य स्रोत (ब्लॉब, फ़ाइल) से पढ़ने की क्षमता प्रदान करता है। किसी फ़ाइल की सामग्री को पढ़ने के लिए, एक ArrayBuffer एक FileReader ऑब्जेक्ट का उपयोग करता है और, XHR ऑब्जेक्ट की तरह, इसका उपयोग अतुल्यकालिक रूप से यह सुनिश्चित करने के लिए किया जाता है कि डिस्क से पढ़ना उपयोगकर्ता इंटरफ़ेस को ब्लॉक नहीं करता है।

 function readFileToArrayBuffer(file, successCallback) { // Create a FileReader var reader = new FileReader(); // Register for 'load' and 'error' events reader.onload = function () { // The 'result' property returns an ArrayBuffer for readAsArrayBuffer var buffer = reader.result; successCallback(buffer); } reader.onerror = function (evt) { // The error code indicates the reason for failure if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) { alert("Failed to read file: " + file.name); } } // Begin a read of the file contents into an ArrayBuffer reader.readAsArrayBuffer(file); } 

निष्कर्ष

बाइनरी डेटा सक्रिय रूप से वेब ब्राउज़र द्वारा उपयोग किया जाता है। IE10 में टाइप किए गए एरर्स, XHR2 और फ़ाइल API सपोर्ट के साथ, वेब एप्लिकेशन अब बाइनरी डेटा के साथ सीधे काम कर सकते हैं, बाइट स्तर पर डेटा में हेरफेर कर सकते हैं, अतिरिक्त बाइनरी डेटा फॉर्मेट प्रदर्शित कर सकते हैं, और मौजूदा मीडिया प्रारूपों से अतिरिक्त डेटा निकाल सकते हैं। आईई टेस्ट ड्राइव पर बाइनरी फाइल इंस्पेक्टर उदाहरण की कोशिश करें, और IE10 में टाइप किए गए एरर्स का कार्यान्वयन।