HTML5 CI SIAMO! 6 demo in 30 minuti ricchi di azione! Una panoramica di impatto sugli aspetti più divertenti della specifica, tutti da mettere in pratica

1. WOW!
HTML5 LIVE!

2. CAPITOLO PRIMO
VIDEO + CANVAS
Production Ready

3. 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);

4. CAPITOLO PRIMO
PRIMA DEMO
LAUNCH

5. CAPITOLO PRIMO
UN’EVOLUZIONE
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);
}

6. CAPITOLO PRIMO
SECONDA DEMO
LAUNCH

7. CAPITOLO SECONDO
VIDEO + CANVAS
+ CANVAS
Production Ready

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

9. putImageData
CANVAS getImageData
CANVAS drawImage
(NASCOSTO)
VIDEO

10. 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);
}

11. CAPITOLO SECONDO
PRIMA DEMO
LAUNCH

12. CANVAS
CANVAS
(NASCOSTO)
VIDEO
(NASCOSTO)

13. CAPITOLO SECONDO
SECONDA DEMO
Potenziali problemi di performance
LAUNCH

14. CAPITOLO TERZO
CANVAS +
WEBSTORAGE
Production Ready

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

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

17. CAPITOLO TERZO
PRIMA DEMO
Potenziali problemi di performance
LAUNCH MIXER LAUNCH GALLERY

18. CAPITOLO QUARTO
SHARED
WEBWORKERS
Tratta dal progetto guida

20. CAPITOLO QUARTO
PRIMA DEMO
LAUNCH
LAUNCH DASHBOARD

21. END
GRAZIE
sandro.paganotti@wavegroup.it
http://www.sandropaganotti.com