
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:
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!