Blog webdeveloperski Patryk yarpo Jar

Zrzuty ekranu za pomocą JavaScript (HTML5 – canvas)

Autor wiadomości Maj 14, 2013

Wraz z nadejściem HTML5 i jego wielu rewolucyjnych API nastała era rzeczy, które dawniej wydawały się trudne / bardzo trudne / niewykonalne (niepotrzebne skreślić).

Jedną z takich funkcji jest możliwość rysowania za pomocą JavaScriptu na płótnie (ang canvas). Służy do tego znacznik <canvas /> oraz odpowiednie API przypominające podobne rozwiązania z innych języków programowania.

Rysowanie ekranu na płótnie

Nie, nie miałem aż tak wiele czasu, aby napisać to samemu. Miałem jednak trochę, aby wygoogle'ować ciekawą bibliotekę. Padło na bardzo przyjemną w użyciu html2canvas. Kod tej biblioteki przed spakowaniem ma prawie 3k linii, co trochę zniechęca do pisania tego własnoręcznie.

Do zastosowania biblioteki zachęca także przyjazna licencja (MIT) oraz kilka bardzo przydatnych funkcji. Zobaczmy jednak prosty przykład zastosowania:

html2canvas(document.body, {
    onrendered: function(canvas) {
        document.body.appendChild(canvas);
    }
});

demo online

Jak widać w najprostszej postaci funkcja przyjmuje 2 parametry:

  1. jaki element strony ma być narysowany na płótnie (tu cała strona `document.body')
  2. obiekt z ustawieniami

Po wyrenderowaniu odpowiedniego rysunku zostanie on dołączony do ciała strony. Inaczej mówiąc na końcu strony pokaże się znacznik <canvas /> z odpowiednią zawartością.

Pobieranie fragmentu strony

Aby pobrać jedynie wybrany fragment strony należy podać jako pierwszy parametr konkretny węzeł drzewa DOM, np.:

html2canvas(document.getElementsByTagName('div')[0], {
    onrendered: function(canvas) {
        document.body.appendChild(canvas);
    }
});

demo online

Dany element mógłby być pobrany na jeden z wielu sposobów, choćby:

Należy jednak pamiętać, że w gdy jakaś metoda zwraca nam kolekcję węzłów należy wybrać który z nich chcemy wykorzystać (tak jak to jest zrobione w powyższym przykładzie `document.getElementsByTagName("div")[0]').

Pobranie zrzutu

Aby pobrać gotową grafikę należy kliknąć na niej prawym klawiszem myszy i zapisać, tak jak zapisuje się zwykłe grafiki.

Jak pobrać zrzut ekranu wykonany za pomocą JavaScript
rys. 1 Jak pobrać zrzut ekranu wykonany za pomocą html2canvas.

Problemy z IE

Lata mijają, Decoral wciąż biały, a IE niedoskonały. W przypadku IE 9 (nie wiem, jak w innych wersjach) nie działało mi zapisywanie grafiki w pokazany wyżej sposób. Opcja "zapisz jako" była wyszarzona. Oczywiście, da się to obejść wklejając zawartość canvasa do znacznika <img />, co sprowadza się do bardzo prostego kodu:

html2canvas(document.body, {
    onrendered: function(canvas) {
        document.getElementsByTagName('img')[0].src = canvas.toDataURL("image/png");
    }
});

demo online

Jak widać cała sztuka polega na tym, aby podmienić zawartość atrybuty `src' danymi zwróconymi przez metodę `toDataURL'. Jakby ktoś był zainteresowany, jak wyglądają te dane, można je podejrzeć w FireBugu (zobacz plik tekstowy z tą zawartością). To rozwiązanie pozwala na pobieranie grafiki także w IE.

Komentarze (2) Trackbacks (0)
  1. Przydatny wpis, a co samego Canvasa to pewne rzeczy są po prostu skonstruowane w nim idiotycznie w porównaniu choćby do OpenGLa 🙁

  2. Myślę, że z Canvas API będzie jak z DOM API. Nawet jeśli będzie najgorszym możliwym API powstanie wiele przyjaznych bibliotek, które rozwiążą ten problem 🙂


Leave a comment

 

Brak trackbacków.