html2canvas - znak nowych czasów

O tej bibliotece miałem napisać jeszcze w zeszłym roku. html2canvas, tak jak pdf.js, czy WebODF, znak nowych czasów - czas przeglądarek. Nazwa tej biblioteki JavaScript (!) mówi wszystko. Pozwala ona na wykonanie po stronie przeglądarki konwersji strony do obiektu Canvas, czyli de facto obrazu, coś co wciąż jest uciążliwe na serwerach. Oczywiście przeglądarka przeglądarce nierówna, ale h2c ma całkiem niezłe wsparcie:

• Firefox >= 3.5
• Google Chrome
• Opera 11
• Internet Explorer >= 8

Do tego grona mogą śmiało dołączyć także starsze wersje IE za sprawą flashcanvas, czy ExplorerCanvas.

Biblioteka bierze pod uwagę HTML i CSS poza ramkami (frame, element iframe jest wspierane chociaż wiąże się to z pewną niedogodnością - szczegóły poniżej), osadzonymi obiektami (Flash, Java itp.), elementami tworzonymi przez przeglądarki (np. radio button) i  wieloma właściwościami CSS 3.

There are still a lot of CSS properties missing, including most CSS3 properties such as text-shadow, box-radius etc. as well as all elements created by the browser, such as radio and checkbox buttons and list icons. I will compile a full list of supported elements and CSS properties soon. There is no support for frame and object content such as Flash.

Ponad to h2c niestety wymaga na razie jQuery (w testach na stronie używany jest w wersji 1.6.2), ale autorzy wspominają o rezygnacji z niego w najbliższym czasie

It currently still has jQuery as a dependancy, but that will get removed soon.

Jak wygląda kod? Warto zajrzeć do źródła jquery.plugin.html2canvas.js, o to najciekawsze fragmenty:

var object = $.extend( {}, {
    logging: false,
    proxyUrl: 'http://html2canvas.appspot.com/',
    ready: function( renderer )
        {
        document.body.appendChild( renderer.canvas );
        }
    }, options );
new html2canvas(this.get(0), object);

Jak widać serwer jest sprowadzany do nowej roli, jako proxy do pobierania treści pływających ramek, oraz treści (np. grafiki) z innych zewnętrznych źródeł. Wynika to z najnowszych zasad bezpieczeństwa przeglądarek: same origin policy.

Przed użyciem powyższego kodu nie zapomnijmy załadować interesujących nas bibliotek.

<script type="text/javascript" src="external/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="build/html2canvas.js"></script>

Choć projekt wymaga jeszcze sporego rozwoju podziwiam jego aktualne możliwości. Jeśli jesteście zainteresowani jego rozwojem zaglądajcie na GitHub.