JavaScript i dane binarne

JavaScript nie jest sławny ze względu na obsługę danych binarnych. Nie znaczy to, że takiej nie ma. Jest! I to całkiem rozbudowana. Dziś zajmiemy się kilkoma najbardziej przydatnymi typami danych i obiektami do manipulacji takimi danymi.

ArrayBuffer i DataView

Najprostszym formatem przechowywania danych binarnych jest obiekt ArrayBuffer. Nie daje nam żadnych możliwości manipulacji a jedynie pozwala sprawdzić jego rozmiar w atrybucie length. Wiele funkcji JavaScript zwraca jednak ten obiekt oraz pozwala na konwersję na inne formaty.

Amy manipulować danymi, musimy utworzyć widok czyli obiekt DataView, który powie nam jakiego typu dane binarne mamy dostępne. Poprzez widok możemy czytać i zapisywać w buforze jak w zwykłej tablicy:

// tworzymy ArrayBuffer o rozmiarze 32 bajtów
bufor = new ArrayBuffer(32);
 
// dodajemy widok jako tablicę 8-bitowych danych
var int8 = new Int8Array(bufor);
 
// zapisujemy coś w tej tablicy
int8[0] = 5;
int8[1] = 13;

// wypisujemy dane z 3 bajtu (tu będzie oczywiście zero)
console.log(int8[2]);

Do wyboru mamy cały zestaw funkcji pozwalających korzystać z buforów jako tablic int16, int32, Uint, float16 i float32. Pełną listę znajdziemy tutaj.

Blob czyli Binary Large Object

Jednym z najbardziej binarnych elementów w JavaScript jest obiekt BLOB. Z tego obiektu korzystaliśmy w poprzednim wpisie pobierając obrazek AJAXem. Przyjrzyjmy się mu bliżej. Obiekt BLOB tworzymy z dowolnych danych:

var myBlob = new Blob(["treść naszego bloba"], {type : 'text/html'});

Jak widać każdego tworzymy podając mu typ danych. Jako treść możemy podać takie obiekty jak Array, ArrayBuffer, DataViev czy innego bloba. Gdy już mamy nasz blobowy obiekt możemy odczytać jego rozmiar i typ:

// rozmiar bloba
console.log(myBlob.size);
// typ danych
console.log(myBlob.type);

To właściwie tyle. Nie ma więcej właściwości. Możemy jeszcze wyciąć fragment danych z naszego bloba tworząc… kolejnego bloba:

var newBlob = myBlob.slice(0,10,"text/plain");

Utworzyliśmy nowego bloba wycinając 10 pierwszych bajtów z poprzedniego. Nadaliśmy też typ naszemu nowemu blobowi.

To wszystko co możemy robić w ramach bloba. Na szczęście jest sporo innych obiektów, które z niego korzystają.

File czyli trochę więcej niż blob

Obiekt file możemy uzyskać gdy w kodzie HTML umieścimy element input przeznaczony do uploadu plików. Jeśli nazwalibyśmy nasz element np. „plik”, to pobranie obiektu file wygląda tak:

var file = document.getElementById('plik').files[0];

Oprócz wszystkich własności i metod dostępnych dla bloba, file posiada również atrybuty name oraz lastModifiedDate.

Oprócz elementu input pliki możemy też otrzymać z elementów, które przyjmują drag&drop. W akcji ondrop() możemy skorzystać z podanych plików. Przykładowa funkcja obsługująca ondrop() może wyglądać tak:

function ondrop(event)
{
   var files = event.dataTransfer.files;

   var count = files.length;
   console.log("File count: " + count + "\n");

   for (var i = 0; i < files.length; i++) {
      console.log("File " + files[i].name);
   }
}

Jak korzystać z danych binarnych?

Mamy kilka różnych sposobów na użycie danych binarnych. Jednym z najprostszych jest przekształcenie na URL. Otrzymamy wtedy tekst, który można wstawić w dowolny element, który oczekuje adresu, np. w atrybut src dla obrazka (co zrobiliśmy w poprzednim artykule) lub w element iframe. Korzystamy z obiektu URL:

var url = URL.createObjectURL(blob);
// url będzie zawierał tekst podobny do "blob:d3958f5c..."

Obiekt FileReader pozwala przekształcać bloby na inne typy danych. Mamy kilka dostępnych funkcji:

var arrayBuffer = FileReader.readAsArrayBuffer(blob);
var url = FileReader.readAsDataUrl(blob);
var string = FileReader.readAsBinaryString(blob);
var text = FileReader.readAsText(blob,"UTF-16");

W ostatnim przypadku podajemy kodowanie tekstu. Domyslnie jest UTF-8.

Na koniec

To tylko próbka możliwości binarnych JavaScriptu. Widać, że bez wiekszych problemów możemy zarządzać danymi binarnymi, tworzyć je, czytać, zapisywać i modyfikować. Warto o tym pamiętać, gdyż coraz częściej musimy w przeglądarce przetwarzać dane binarne – obrazy, dźwięki, wideo itp.

Więcej informacji można znaleźć np. w domumentacji MDN, gdzie w/w obiekty są szczegółowo opisane.