HTML5 Live

2,522 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,522
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Live

  1. 1. WOW! HTML5 LIVE!
  2. 2. CAPITOLO PRIMOVIDEO + CANVAS Production Ready
  3. 3. 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);
  4. 4. CAPITOLO PRIMOPRIMA DEMO LAUNCH
  5. 5. 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);}
  6. 6. CAPITOLO PRIMOSECONDA DEMO LAUNCH
  7. 7. CAPITOLO SECONDOVIDEO + CANVAS + CANVAS Production Ready
  8. 8. ImageData getImageData (in double sx, in double sy, in double sw, in double sh);
  9. 9. putImageDataCANVAS getImageDataCANVAS drawImage (NASCOSTO) VIDEO
  10. 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. 11. CAPITOLO SECONDOPRIMA DEMO LAUNCH
  12. 12. CANVASCANVAS(NASCOSTO)VIDEO(NASCOSTO)
  13. 13. CAPITOLO SECONDOSECONDA DEMO Potenziali problemi di performance LAUNCH
  14. 14. CAPITOLO TERZO CANVAS +WEBSTORAGE Production Ready
  15. 15. WEBSTORAGE localStorage.setItem(...) data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADICAYAAACZBDir AAAgAElEQVR4Aey9B5yl2VmfeW7dyqmrK... canvas.toDataURL(...)
  16. 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. 17. CAPITOLO TERZO PRIMA DEMO Potenziali problemi di performanceLAUNCH MIXER LAUNCH GALLERY
  18. 18. CAPITOLO QUARTO SHAREDWEBWORKERS Tratta dal progetto guida
  19. 19. CAPITOLO QUARTOPRIMA DEMO LAUNCHLAUNCH DASHBOARD
  20. 20. ENDGRAZIEsandro.paganotti@wavegroup.ithttp://www.sandropaganotti.com

×