Blob

ArrayBuffer a náhledy jsou součásti standardu ECMA, součásti JavaScriptu.

V prohlížeči jsou i další objekty vyšší úrovnÄ›, popsané ve specifikaci souborového API, konkrétnÄ› Blob.

Blob se skládá z nepovinného Å™etÄ›zce type (zpravidla MIME typ) a z blobParts – posloupnost jiných objektů Blob, Å™etÄ›zců a objektů BufferSource.

Syntaxe konstruktoru je:

new Blob(blobParts, volby);

• blobParts je pole hodnot Blob/BufferSource/String.
• volby je nepovinný objekt:
  • type – typ blobu, zpravidla MIME typ, napÅ™. image/png,
  • endings – zda pÅ™evádÄ›t znaky konce řádku v Blob tak, aby odpovídaly koncům řádků v aktuálním OS (\r\n nebo \n). StandardnÄ› "transparent" (nedÄ›lá nic), ale může být i "native" (pÅ™evádí).

Příklad:

// vytvoříme Blob z řetězce
let blob = new Blob(["<html>…</html>"], {type: 'text/html'});
// všimněte si: první argument musí být pole [...]

// vytvoříme Blob z typového pole a řetězců
let ahoj = new Uint8Array([65, 104, 111, 106]); // "Ahoj" v binárním tvaru

let blob = new Blob([ahoj, ' ', 'světe'], {type: 'text/plain'});

Části blobu můžeme získat pomocí:

blob.slice([počátečníByte], [koncovýByte], [typObsahu]);

• počátečníByte – počáteční byte, standardnÄ› 0.
• koncovýByte – poslední byte (nebude zahrnut, standardnÄ› až do konce).
• typObsahu – type nového blobu, standardnÄ› stejný jako ve zdroji.

Argumenty se podobají argumentům pole.slice, jsou povoleny i záporné hodnoty.

Blob jako URL

Blob můžeme snadno použít jako URL pro <a>, <img> nebo jiné značky, abychom zobrazili jeho obsah.

Díky vlastnosti type můžeme také Blob objekty stahovat nebo je nahrávat jinam. Z jejich type se pak pÅ™irozenÄ› stane Content-Type v síťových požadavcích.

Začneme jednoduchým příkladem. Kliknutím na odkaz si stáhnete dynamicky generovaný Blob s obsahem Ahoj, světe! jako soubor:

<!-- atribut download donutí prohlížeč soubor stáhnout a nepřecházet na něj -->
<a download="hello.txt" href='#' id="odkaz">Stáhnout</a>

<script>
let blob = new Blob(["Ahoj, světe!"], {type: 'text/plain'});

odkaz.href = URL.createObjectURL(blob);
</script>

Můžeme také vytvoÅ™it odkaz dynamicky v JavaScriptu a simulovat kliknutí na nÄ›j voláním odkaz.click(). Pak se stahování automaticky spustí.

Následuje podobný kód, který pÅ™imÄ›je uživatele stáhnout dynamicky vytvoÅ™ený Blob bez jakéhokoli HTML:

let odkaz = document.createElement('a');
odkaz.download = 'hello.txt';

let blob = new Blob(['Ahoj, světe!'], {type: 'text/plain'});

odkaz.href = URL.createObjectURL(blob);

odkaz.click();

URL.revokeObjectURL(odkaz.href);

URL.createObjectURL vezme Blob a vytvoří pro nÄ›j unikátní URL ve tvaru blob:<původ>/<uuid>.

Hodnota odkaz.href vypadá následovnÄ›:

blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273

Pro každé URL generované voláním URL.createObjectURL si prohlížeč vnitÅ™nÄ› uloží mapování URL → Blob. Taková URL jsou tedy krátká, ale umožňují přístup k blobu.

Vygenerované URL (a tedy i odkaz s ním) je platné jedinÄ› uvnitÅ™ aktuálního dokumentu, dokud je otevÅ™ený. A umožňuje odkazovat se na Blob v <img>, <a>, v zásadÄ› v kterémkoli jiném objektu, který očekává URL.

Má to vÅ¡ak vedlejší efekt. Dokud existuje mapování pro Blob, samotný Blob pÅ™etrvává v pamÄ›ti. Prohlížeč jej nemůže uvolnit.

Když je dokument zavÅ™en, mapování se automaticky odstraní, takže objekty Blob jsou poté uvolnÄ›ny. Jestliže vÅ¡ak aplikace běží dlouhou dobu, nestane se to hned tak brzy.

Když tedy vytvoříme URL, tento Blob zůstane viset v pamÄ›ti, i když už není zapotÅ™ebí.

URL.revokeObjectURL(url) odstraní odkaz z vnitÅ™ního mapování, čímž umožní, aby byl Blob smazán (pokud na nÄ›j není žádný jiný odkaz) a paměť uvolnÄ›na.

V posledním uvedeném příkladu jsme zamýšleli použít Blob pouze jednou, pro okamžité stažení, proto okamžitÄ› voláme URL.revokeObjectURL(odkaz.href).

V pÅ™edchozím příkladu s HTML odkazem, na který lze kliknout, vÅ¡ak URL.revokeObjectURL(odkaz.href) nevoláme, protože tím bychom URL blobu zneplatnili. Po jeho zruÅ¡ení a odstranÄ›ní mapování již URL nefunguje.

Blob na base64

Alternativou k URL.createObjectURL je pÅ™evedení objektu Blob na Å™etÄ›zec zakódovaný do base64.

Toto kódování reprezentuje binární data jako řetězec ultrabezpečných „čitelných“ znaků s ASCII kódy od 0 do 64. A co je ještě důležitější, toto kódování můžeme používat v „datových URL“.

Datové URL má tvar data:[<mediatype>][;base64],<data>. Taková URL můžeme používat vÅ¡ude, kde můžeme používat „běžná“ URL.

Například zde je smajlík:

<img src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7">

Prohlížeč dekóduje řetězec a zobrazí obrázek:

K pÅ™evedení objektu Blob na base64 použijeme zabudovaný objekt FileReader, který může načítat data z blobů v mnoha formátech. PodrobnÄ›ji to probereme v příští kapitole.

Následuje demo stahování blobu, nyní pomocí base64:

let odkaz = document.createElement('a');
odkaz.download = 'hello.txt';

let blob = new Blob(['Ahoj, světe!'], {type: 'text/plain'});

let reader = new FileReader();
reader.readAsDataURL(blob); // převede blob na base64 a volá onload

reader.onload = function() {
  odkaz.href = reader.result; // datové URL
  odkaz.click();
};

Oba způsoby vytvoÅ™ení URL pro Blob jsou použitelné, ale URL.createObjectURL(blob) je obvykle jednodušší a rychlejší.

Převod obrázku na blob

Můžeme vytvoÅ™it Blob z obrázku, části obrázku nebo dokonce můžeme vytvoÅ™it screenshot stránky. To se hodí, když jej chceme nÄ›kam nahrát.

Operace s obrázky provádíme pomocí elementu <canvas>:

1. Nakreslíme obrázek (nebo jeho část) na plátno voláním canvas.drawImage.
2. Voláme metodu plátna .toBlob(callback, format, quality), která vytvoří Blob, a až bude hotový, spustí na nÄ›m callback.

V následujícím příkladu je obrázek jen zkopírován, ale před vytvořením blobu můžeme také vyjmout jeho část nebo jej na plátně nějak transformovat:

// vezmeme libovolný obrázek
let obrázek = document.querySelector('img');

// vytvoříme <canvas> stejné velikosti
let plátno = document.createElement('canvas');
plátno.width = obrázek.clientWidth;
plátno.height = obrázek.clientHeight;

let kontext = plátno.getContext('2d');

// zkopírujeme do něj obrázek (tato metoda umožňuje vyjmout jeho část)
kontext.drawImage(obrázek, 0, 0);
// na plátně můžeme volat kontext.rotate() a provádět mnoho dalších věcí

// toBlob je asynchronní operace, po jejím dokončení se volá callback
plátno.toBlob(function(blob) {
  // blob je připraven, stáhneme ho
  let odkaz = document.createElement('a');
  odkaz.download = 'example.png';

  odkaz.href = URL.createObjectURL(blob);
  odkaz.click();

  // smažeme vnitřní odkaz na blob, aby ho prohlížeč mohl uvolnit z paměti
  URL.revokeObjectURL(odkaz.href);
}, 'image/png');

Pokud pÅ™ed callbacky dáváme pÅ™ednost async/await:

let blob = await new Promise(splň => plátno.toBlob(splň, 'image/png'));

Pro vytvoÅ™ení screenshotu stránky můžeme použít knihovnu jako https://github.com/niklasvh/html2canvas, která provádí to, že prostÄ› jen projde stránku a vykreslí ji na <canvas>. Pak můžeme získat její Blob stejným způsobem jako výše.

Od Blobu k ArrayBufferu

Konstruktor Blob umožňuje vytvoÅ™it blob téměř z čehokoli, včetnÄ› jakéhokoli BufferSource.

Pokud vÅ¡ak potÅ™ebujeme provádÄ›t zpracování na nižší úrovni, můžeme získat ArrayBuffer nejnižší úrovnÄ› voláním blob.arrayBuffer():

// získáme arrayBuffer z blobu
const příslibBufferu = await blob.arrayBuffer();

// nebo
blob.arrayBuffer().then(buffer => /* zpracování ArrayBufferu */);

Od Blobu k proudu

Když načítáme a zapisujeme do blobu více než 2 GB dat, bude pro nás používání arrayBuffer paměťovÄ› náročnÄ›jší. V této chvíli můžeme pÅ™evést blob přímo na proud.

Proud (stream) je speciální objekt, ze kterého můžeme číst (nebo do něj zapisovat) po částech. Zde je to mimo náš rámec, ale bude následovat příklad a více se o tom můžete dočíst v https://developer.mozilla.org/en-US/docs/Web/API/Streams_API. Proudy se hodí pro data, která je vhodné zpracovávat po jednotlivých částech.

Metoda stream() rozhraní Blob vrací proud ReadableStream, který pÅ™i čtení vrací data obsažená v tomto blobu.

Pak z něj můžeme číst následovně:

// získáme readableStream z blobu
const readableStream = blob.stream();
const stream = readableStream.getReader();

while (true) {
  // pro každou iteraci: value (hodnota) je další fragment blobu
  let { done, value } = await stream.read();
  if (done) {
    // v proudu již nejsou další data
    console.log('celý blob zpracován.');
    break;
  }

  // provedeme něco s částí dat, kterou jsme právě načetli z blobu
  console.log(value);
}

Shrnutí

Zatímco ArrayBuffer, Uint8Array a jiné objekty BufferSource jsou „binární data“, Blob reprezentuje „binární data spolu s typem“.

Díky tomu jsou bloby vhodné pro operace stahování a nahrávání, které se v prohlížeči používají velice často.

Metody, které provádÄ›jí webové požadavky, napÅ™. XMLHttpRequest, fetch a tak dále, mohou s Blob pÅ™irozenÄ› pracovat stejnÄ› jako s jinými binárními typy.

Mezi Blob a binárními datovými typy nižší úrovnÄ› můžeme snadno pÅ™evádÄ›t:

• Můžeme vytvoÅ™it Blob z typového pole konstruktorem new Blob(...).
• Z blobu můžeme získat zpÄ›t ArrayBuffer voláním blob.arrayBuffer() a pak na nÄ›m vytvoÅ™it náhled pro binární zpracování na nižší úrovni.

Když potÅ™ebujeme pracovat s velkým blobem, jsou velmi užitečné konverzní proudy. Z blobu můžeme snadno vytvoÅ™it ReadableStream. Metoda stream() rozhraní Blob vrátí ReadableStream, který pÅ™i čtení vrací data obsažená v blobu.