Screenshot w HTML5

Wideo towarzyszy internautom niemal każdego dnia. Czy zastanawialiście się, jak zrobić screen’a z filmu w przeglądarce? Naturalnie można. Z pomocą przychodzi HTML5 wraz z metodą drawimage(). Co prawda funkcja obsługująca owe zdarzenia pojawiła się w specyfikacji już w 2008 roku, jednak jest do tej pory rozwijana i udoskonalana. Przejdźmy jednak do rzeczy.

Podstawa

Kojarzycie pewnego przerośniętego króliczka?

Ten oto filmik posłuży nam za bazę do prezentacji metody drawimage(), która zawiera się w klasie getContext(’2d’). Podstawą do budowy przechwycenia obrazu będzie kod:

var context= document.querySelector('canvas').getContext('2d');
document.querySelector('button').addEventListener('click',function(){
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
});

Tworzenie obrazu

Do stworzenia obrazu będziemy korzystać z obsługi zdarzeń loadedmetadata. Zdarzenia jaki będziemy obsługiwać to po prostu klatki filmu, które następnie będziemy zapisywać do metody canvas, wraz z parametrami obrazu (szerokość, wysokość). Wygląda to następująco:

video.addEventListener('loadedmetadata', function() {
    //obliczamy proporcje obrazu
    ratio = video.videoWidth / video.videoHeight;
    //definiujemy wymaganą szerokość 100 pikseli mniejszą niż szerokość wideo
    w = video.videoWidth - 100;
    //obliczamy wysokość obrazu z zachowaniem proporcji
    h = parseInt(w / ratio, 10);
    //definiujemy metodę canvas i jej parametry - szerokość i wysokość
    canvas.width = w;
    canvas.height = h;            
}, false);

Następnie należy wykorzystać wcześniej wspomnianą metodę drawimage() i przekazać jej obraz jako parametr w momencie kliknięcia w przycisk.

function shot() {
    //określamy pole na którym będzie zapisany nasz screen
    context.fillRect(0, 0, w, h);
    //cyk i gotowe
    context.drawImage(video, 0, 0, w, h);
}

Efekt można zobaczyć poniżej.