Successfully reported this slideshow.
Your SlideShare is downloading. ×

HTML5 Live

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

HTML5 Live

  1. 1. WOW! HTML5 LIVE!
  2. 2. CAPITOLO PRIMO VIDEO + CANVAS Production Ready
  3. 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. 4. CAPITOLO PRIMO PRIMA DEMO LAUNCH
  5. 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. 6. CAPITOLO PRIMO SECONDA DEMO LAUNCH
  7. 7. CAPITOLO SECONDO VIDEO + CANVAS + CANVAS Production Ready
  8. 8. ImageData getImageData (in double sx, in double sy, in double sw, in double sh);
  9. 9. putImageData CANVAS getImageData CANVAS 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 SECONDO PRIMA DEMO LAUNCH
  12. 12. CANVAS CANVAS (NASCOSTO) VIDEO (NASCOSTO)
  13. 13. CAPITOLO SECONDO SECONDA 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 performance LAUNCH MIXER LAUNCH GALLERY
  18. 18. CAPITOLO QUARTO SHARED WEBWORKERS Tratta dal progetto guida
  19. 19. CAPITOLO QUARTO PRIMA DEMO LAUNCH LAUNCH DASHBOARD
  20. 20. END GRAZIE sandro.paganotti@wavegroup.it http://www.sandropaganotti.com

×