HTML5 Live

WOW! HTML5 LIVE!

CAPITOLO PRIMOVIDEO + CANVAS Production Ready

void drawImage(in HTMLVideoElement image,in double dx, in double dy, in optionaldouble 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);

CAPITOLO PRIMOPRIMA DEMO LAUNCH

CAPITOLO PRIMO UN’EVOLUZIONEdisegnaCanvas = 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);}

CAPITOLO PRIMOSECONDA DEMO LAUNCH

CAPITOLO SECONDOVIDEO + CANVAS + CANVAS Production Ready

ImageData getImageData (in double sx, in double sy, in double sw, in double sh);

putImageDataCANVAS getImageDataCANVAS drawImage (NASCOSTO) VIDEO

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; for(var i=0; i < fotogramma_data.length; i+=4){ var rosso = colori.rosso.checked; if (!rosso) fotogramma_data[i ] = 0; var verde = colori.verde.checked; var blu = colori.blu.checked; if (!verde) fotogramma_data[i+1] = 0; for(var i=0; i < fotogramma_data.length; i+=4){ if (!rosso) fotogramma_data[i ] = 0; if (!blu ) fotogramma_data[i+2] = 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); }

CAPITOLO SECONDOPRIMA DEMO LAUNCH

CANVASCANVAS(NASCOSTO)VIDEO(NASCOSTO)

CAPITOLO SECONDOSECONDA DEMO Potenziali problemi di performance LAUNCH

CAPITOLO TERZO CANVAS +WEBSTORAGE Production Ready

WEBSTORAGE localStorage.setItem(...) data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADICAYAAACZBDir AAAgAElEQVR4Aey9B5yl2VmfeW7dyqmrK... canvas.toDataURL(...)

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)) + ">" );}

CAPITOLO TERZO PRIMA DEMO Potenziali problemi di performanceLAUNCH MIXER LAUNCH GALLERY

CAPITOLO QUARTO SHAREDWEBWORKERS Tratta dal progetto guida

CAPITOLO QUARTOPRIMA DEMO LAUNCHLAUNCH DASHBOARD

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

HTML5 Live

by Sandro Paganotti on Mar 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

HTML5 Live — Presentation Transcript