JavaScript
बाइनरी डेटा

टिप्पणियों

Blobs और ArrayBuffers के बीच रूपांतरण

ब्राउज़र में बाइनरी डेटा का प्रतिनिधित्व करने के लिए जावास्क्रिप्ट में दो प्राथमिक तरीके हैं। ArrayBuffers / TypedArrays में उत्परिवर्तनीय (हालांकि अभी भी निश्चित-लंबाई) बाइनरी डेटा होता है जिसे आप सीधे हेरफेर कर सकते हैं। ब्लब्स में अपरिवर्तनीय बाइनरी डेटा होता है जिसे केवल एसिंक्रोनस फ़ाइल इंटरफ़ेस के माध्यम से एक्सेस किया जा सकता है।

एक Blob को एक ArrayBuffer (अतुल्यकालिक) में बदलें

var blob = new Blob(["\x01\x02\x03\x04"]),
    fileReader = new FileReader(),
    array;

fileReader.onload = function() {
    array = this.result;
    console.log("Array contains", array.byteLength, "bytes.");
};

fileReader.readAsArrayBuffer(blob);

var blob = new Blob(["\x01\x02\x03\x04"]);

var arrayPromise = new Promise(function(resolve) {
    var reader = new FileReader();

    reader.onloadend = function() {
        resolve(reader.result);
    };

    reader.readAsArrayBuffer(blob);
});

arrayPromise.then(function(array) {
    console.log("Array contains", array.byteLength, "bytes.");
});

एक ArrayBuffer या टाइप किए गए एरे को एक Blob बदलें

var array = new Uint8Array([0x04, 0x06, 0x07, 0x08]);

var blob = new Blob([array]);

DataViews के साथ ArrayBuffers का हेरफेर

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

var buffer = new ArrayBuffer(2);
var view = new DataView(buffer);

view.setUint8(0, 0xFF);
view.setUint8(1, 0x01);

console.log(view.getUint16(0, false)); // 65281
console.log(view.getUint16(0, true));  // 511

एक बेस 64 स्ट्रिंग से एक टाइपरअरे को बनाना

var data = 
   'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACN' +
   'byblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHx' +
   'gljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

var characters = atob(data);

var array = new Uint8Array(characters.length);

for (var i = 0; i < characters.length; i++) {
  array[i] = characters.charCodeAt(i);
}

TypedArrays का उपयोग करना

टाइप-एड्र्र्स निश्चित लंबाई के परस्पर बाइनरी ArrayBuffers में विभिन्न विचार प्रदान करने वाले प्रकारों का एक समूह है। अधिकांश भाग के लिए, वे Arrays की तरह कार्य करते हैं जो किसी दिए गए संख्यात्मक प्रकार को सभी असाइन किए गए मानों के साथ तालमेल बिठाते हैं। आप अपने डेटा का एक नया दृश्य बनाने के लिए एक TypeedArray कंस्ट्रक्टर के लिए एक ArrayBuffer उदाहरण पारित कर सकते हैं।

var buffer = new ArrayBuffer(8);
var byteView = new Uint8Array(buffer);
var floatView = new Float64Array(buffer);

console.log(byteView);  // [0, 0, 0, 0, 0, 0, 0, 0]
console.log(floatView); // [0]
byteView[0] = 0x01;
byteView[1] = 0x02;
byteView[2] = 0x04;
byteView[3] = 0x08;
console.log(floatView); // [6.64421383e-316]

ArrayBuffers को .slice(...) विधि का उपयोग करके कॉपी किया जा सकता है, या तो सीधे या एक TypedArray दृश्य के माध्यम से।

var byteView2 = byteView.slice();
var floatView2 = new Float64Array(byteView2.buffer);
byteView2[6] = 0xFF;
console.log(floatView);  // [6.64421383e-316]
console.log(floatView2); // [7.06327456e-304]

छवि फ़ाइल का द्विआधारी प्रतिनिधित्व प्राप्त करना

यह उदाहरण इस प्रश्न से प्रेरित है।

हम आपको मानेंगे कि फ़ाइल API का उपयोग करके किसी फ़ाइल को कैसे लोड किया जाए ।

// preliminary code to handle getting local file and finally printing to console
// the results of our function ArrayBufferToBinary().
var file = // get handle to local file.
var reader = new FileReader();
reader.onload = function(event) {
    var data = event.target.result;
    console.log(ArrayBufferToBinary(data));
};
reader.readAsArrayBuffer(file); //gets an ArrayBuffer of the file

अब हम 1 है और 0 है एक का उपयोग कर फ़ाइल डेटा की वास्तविक रूपांतरण DataView :

function ArrayBufferToBinary(buffer) {
   // Convert an array buffer to a string bit-representation: 0 1 1 0 0 0...
   var dataView = new DataView(buffer);
   var response = "", offset = (8/8); 
   for(var i = 0; i < dataView.byteLength; i += offset) {
       response += dataView.getInt8(i).toString(2); 
   }
   return response;
}

DataView आपको संख्यात्मक डेटा पढ़ने / लिखने देता है; getInt8 डेटा को बाइट स्थिति से परिवर्तित करता है - यहां 0 , मान - में पारित - ArrayBuffer में 8-बिट पूर्णांक प्रतिनिधित्व पर हस्ताक्षर करने के लिए, और toString(2) 8-बिट पूर्णांक को द्विआधारी प्रतिनिधित्व प्रारूप (अर्थात 1 के एक स्ट्रिंग toString(2) परिवर्तित करता है 0 की)।

फ़ाइलें बाइट्स के रूप में सहेजी जाती हैं। 'मैजिक' ऑफ़सेट वैल्यू को नोट करके प्राप्त किया जाता है जिसे हम बाइट्स के रूप में संग्रहित फ़ाइलों को 8-बिट पूर्णांक के रूप में लेते हैं और इसे 8-बिट पूर्णांक प्रतिनिधित्व में पढ़ते हैं। यदि हम 32-बिट पूर्णांक में हमारी बाइट-सेव (यानी 8 बिट) फ़ाइलों को पढ़ने की कोशिश कर रहे थे, तो हम ध्यान देंगे कि 32/8 = 4 बाइट रिक्त स्थान की संख्या है, जो कि हमारी बाइट ऑफसेट मूल्य है।

इस कार्य के लिए, DataView s ओवरकिल है। वे आमतौर पर उन मामलों में उपयोग किए जाते हैं जहां डेटा की समाप्ति या विषमता का सामना किया जाता है (उदाहरण के लिए पीडीएफ फाइलों को पढ़ने में, जिनके हेडर विभिन्न आधारों में एन्कोड किए गए हैं और हम सार्थक रूप से उस मूल्य को निकालना चाहेंगे)। क्योंकि हम सिर्फ एक पाठीय प्रतिनिधित्व चाहते हैं, हम विषमता के बारे में परवाह नहीं करते हैं क्योंकि कभी भी इसकी आवश्यकता नहीं है

एक बेहतर - और छोटे - समाधान को UInt8Array टाइप की गई सरणी का उपयोग करके पाया जा सकता है, जो पूरे ArrayBuffer को अहस्ताक्षरित 8-बिट पूर्णांक से बना मानते हैं:

function ArrayBufferToBinary(buffer) {
    var uint8 = new Uint8Array(buffer);
    return uint8.reduce((binary, uint8) => binary + uint8.toString(2), "");
}

एक सरणी के माध्यम से Iterating

एक arrayBuffer के माध्यम से पुनरावृति लिए एक सुविधाजनक तरीका के लिए, आप एक सरल इटरेटर बना सकते हैं कि औजार DataView हुड के नीचे तरीके:

var ArrayBufferCursor = function() {
  var ArrayBufferCursor = function(arrayBuffer) {
    this.dataview = new DataView(arrayBuffer, 0);
    this.size = arrayBuffer.byteLength;
    this.index = 0;
  }

  ArrayBufferCursor.prototype.next = function(type) {
    switch(type) {
      case 'Uint8':
        var result = this.dataview.getUint8(this.index);
        this.index += 1;
        return result;
      case 'Int16':
        var result = this.dataview.getInt16(this.index, true);
        this.index += 2;
        return result;
      case 'Uint16':
        var result = this.dataview.getUint16(this.index, true);
        this.index += 2;
        return result;
      case 'Int32':
        var result = this.dataview.getInt32(this.index, true);
        this.index += 4;
        return result;
      case 'Uint32':
        var result = this.dataview.getUint32(this.index, true);
        this.index += 4;
        return result;
      case 'Float':
      case 'Float32':
        var result = this.dataview.getFloat32(this.index, true);
        this.index += 4;
        return result;
      case 'Double':
      case 'Float64':
        var result = this.dataview.getFloat64(this.index, true);
        this.index += 8;
        return result;
      default:
        throw new Error("Unknown datatype");
    }
  };

  ArrayBufferCursor.prototype.hasNext = function() {
    return this.index < this.size;
  }

  return ArrayBufferCursor;
});

आप इस तरह एक पुनरावृत्ति बना सकते हैं:

var cursor = new ArrayBufferCursor(arrayBuffer);

आप अभी भी आइटम है या नहीं यह जांचने के लिए hasNext का उपयोग कर सकते हैं

for(;cursor.hasNext();) {
    // There's still items to process
}

आप अगला मान लेने के लिए next विधि का उपयोग कर सकते हैं:

var nextValue = cursor.next('Float');

इस तरह के एक सूचना के साथ, द्विआधारी डेटा को संसाधित करने के लिए अपने स्वयं के पार्सर को लिखना बहुत आसान हो जाता है।