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