JavaScript, HTML5, CSS i praca z data URI

javascript-html5-tutorial.pl

Październik 1st, 2015

Dominik-W

Co to takiego? Schemat data URI to prostu sposób reprezentacji danych, jednak w taki sposób, że dane który zwykle przechowujemy w plikach (np. zdjęcie) występują w postaci ciągu tekstowego. Ciąg taki ma odpowiedni format, jednak pozwala programistom na łatwe przesyłanie takiego zasobu np. między aplikacjami Web, a także użycie bezpośrednio w kodzie CSS bądź JavaScript.

Nie potrzeba ponadto wykonywania dodatkowych żądań HTTP w celu pobrania dodatkowych plików, jako że takie dane mogą zostać pobrane od razu, jednym żądaniem.

Ciąg Data URI ma postać:

data:[media type][;charset=xxx][;base64],data

Generowanie oraz używanie data URI

O użyciu Data URI pisaliśmy już dawniej w kontekście operacji na HTML5 Canvas. Dziś rozwiniemy temat.

Ciąg danych w postaci Data URI może zostać użyty bezpośrednio jako atrybut źródła obrazka i wyświetlony w przeglądarce:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA..." />

OK, ale w ogóle to skąd mam wziąć ten ciąg Data URI?

Można skorzystać z metody toDataURL() obiektu HTML5 Canvas:

myCanvas.toDataURL();

Przydała by się może jednak wygodniejsza metoda, po stronie serwera. Na szczęście wykonanie tego zadania w PHP jest bardzo proste.

Konwersja pliku na dane – generowanie ciągu Data URI w PHP

PHP dostarcza wszystkiego co potrzeba, tj. rozpoznawania typu MIME pliku oraz metody do kodowania base64.

$filename = 'test.png';

$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mimetype = finfo_file($finfo, $filename);
finfo_close($finfo);

$contents = file_get_contents($filename);
$data_uri = "data:" . $mimetype . ";base64," . base64_encode($contents);

echo $data_uri;

Kilka linijek i mamy nasz plik w postaci ciągu Data URI!

Użycie jest bardzo proste

Taki ciąg możemy wkleić do klasy CSS, bądź też po prostu jako atrybut src elementu img:

<img src="<?php echo $data_uri ?>" />

Do testów użyłem prostego obrazka w formacie PNG:

Pełny ciąg Data URI dla tego obrazka znajduje się tutaj:

test-uri.txt

Kopiuj, wklej. Nie wysyłam Wam pliku obrazka, tylko ciąg tekstowy. Możecie go wkleić w źródle swojej strony i wyświetlić.

W HTML:

<img src="TUTAJ-NASZ-CIAG-DATA-URI" alt="Data URI" />

Osadzenie w CSS:

body { 
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMwAAADECAIAAABcE1nIAAAAAXNSR0IArs4c[...]) no-repeat left center;
}

Dynamiczne dodanie obrazka – JavaScript:


var str = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA... [reszta naszego ciągu]";
var image = new Image();
image.src = str;

image.onload = function() {
  document.body.appendChild(image);  
}

Fajnie? Fajnie!

I już uruchamia się nasza wyobraźnia podpowiadająca jak to można wykorzystać w naszych projektach…

Dodatkowe zasoby:

– MDN

https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Podsumowanie

Jeśli spotykaliśmy się kiedyś z takimi ciągami i zastanawialiśmy co to takiego, teraz już wiemy – to żadna magia – to Data URI.

Pozwala nam bezproblemowo osadzać zakodowane obrazki w naszych źródłach. Dzięki temu jakże prosto możemy je także przysyłać przez sieć, pomiędzy aplikacjami.

Miłej zabawy!