WOW!HTML5 LIVE!

VIDEO + CANVASCAPITOLO PRIMO

★ ★ ★ ★ ☆Production Ready

void drawImage(in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh);

void drawImage(in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);

PRIMA DEMOCAPITOLO PRIMO

LAUNCH

UN’EVOLUZIONECAPITOLO PRIMO

disegnaCanvas = function(video, context){ if(video.paused || video.ended) return false; context.drawImage(video,0,0); context.drawImage(video, 125, 98, 200, 60, 0 , 98, 450, 108 ); setTimeout(function(){disegnaCanvas(video, context)},0); }

SECONDA DEMOCAPITOLO PRIMO

LAUNCH

VIDEO + CANVAS + CANVAS

CAPITOLO SECONDO

★ ★ ★ ★ ☆Production Ready

ImageData getImageData(in double sx, in

double sy, in double sw, in double sh);

VIDEO

CANVAS(NASCOSTO)

CANVAS

drawImage

getImageData

putImageData

decomposizioneColori = function(video, context, context_nascosto, colori){ if(video.paused || video.ended) return false; context_nascosto.drawImage(video,0,0); var fotogramma = context_nascosto.getImageData(0,0, context_nascosto.canvas.width,context_nascosto.canvas.height); var fotogramma_data = fotogramma.data; var rosso = colori.rosso.checked; var verde = colori.verde.checked; var blu = colori.blu.checked; for(var i=0; i < fotogramma_data.length; i+=4){ if (!rosso) fotogramma_data[i ] = 0; if (!verde) fotogramma_data[i+1] = 0; if (!blu ) fotogramma_data[i+2] = 0; } fotogramma.data = fotogramma_data; context.putImageData(fotogramma,0,0); setTimeout(function(){ decomposizioneColori(video, context, context_nascosto, colori) },0); }

for(var i=0; i < fotogramma_data.length; i+=4){ if (!rosso) fotogramma_data[i ] = 0; if (!verde) fotogramma_data[i+1] = 0; if (!blu ) fotogramma_data[i+2] = 0;}

PRIMA DEMOCAPITOLO SECONDO

LAUNCH

VIDEO(NASCOSTO)

CANVAS(NASCOSTO)

CANVAS

SECONDA DEMOCAPITOLO SECONDO

LAUNCH

★ ★ ★ ☆ ☆Potenziali problemi di performance

CANVAS + WEBSTORAGE

CAPITOLO TERZO

★ ★ ★ ★ ☆Production Ready

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADICAYAAACZBDir

AAAgAElEQVR4Aey9B5yl2VmfeW7dyqmrK...

canvas.toDataURL(...)

localStorage.setItem(...)

WEBSTORAGE

salvaImmagine = function(evento){ var canvas = document.querySelector('canvas'); localStorage.setItem('screenshot_' + localStorage.length, canvas.toDataURL() );}

caricaLaGallery = function(evento){ for(var x = 0; x < localStorage.length; x++) document.querySelector('div.screen_shots' ).insertAdjacentHTML('afterBegin', "<img src='" + localStorage.getItem(localStorage.key(x)) + "'>" );}

PRIMA DEMOCAPITOLO TERZO

LAUNCH MIXER

★ ★ ★ ☆ ☆Potenziali problemi di performance

LAUNCH GALLERY

SHARED WEBWORKERS

CAPITOLO QUARTO

★ ★ ☆ ☆ ☆

Tratta dal progetto guida

PRIMA DEMOCAPITOLO QUARTO

LAUNCH

LAUNCH DASHBOARD

GRAZIE END

sandro.paganotti@wavegroup.ithttp://www.sandropaganotti.com