image vidéo HTML5 capture bitmap

je suis arrivé ce script:image vidéo HTML5 capture bitmap

function capture(video, scaleFactor) { 
    if(scaleFactor == null){ 
     scaleFactor = 1; 
    } 
    var w = video.videoWidth * scaleFactor; 
    var h = video.videoHeight * scaleFactor; 
    var canvas = document.createElement('canvas'); 
    canvas.width = w; 
    canvas.height = h; 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(video, 0, 0, w, h); 


    return canvas; 
} 


function shoot(){ 
    var video = document.getElementById(videoId); 
    var output = document.getElementById('output'); 
    var canvas = capture(video, scaleFactor); 
    canvas.onclick = function(){ 
     window.open(this.toDataURL()); 
    }; 
    snapshots.unshift(canvas); 
    output.innerHTML = ''; 
    for(var i=0; i<1; i++){ 
     output.appendChild(snapshots[i]); 
    } 

}

Ce que je veux faire est d'exporter l'instantané à une image bitmap. J'ai lu que je pourrais utiliser cette ligne:

canvas.toDataURL('image/jpeg');

Mais je ne sais pas où l'ajouter.

Des idées?

Source

2011-11-14 Alejandro Ar

_When_ souhaitez-vous exporter l'instantané en tant que bitmap? Ce n'est pas clair comment vous voulez que cela fonctionne - quand 'shoot' est appelé? Lorsque la toile est cliquée? Une autre condition? Pendant que nous y sommes, 'image/jpeg' n'est pas un type de bitmap - lequel voulez-vous? –

Il est appelé lorsque l'utilisateur clique sur un bouton. –

Ce que je veux, c'est pouvoir enregistrer l'image en jpeg ou en png avec un clic droit lorsque l'image est générée. –

ctx.drawImage (vidéo, 0, 0, w, h); Tocanvas.toDataURL (...)

toDataURL vous renvoie une chaîne qui est généralement un contenu d'image (fichier) codé en base64. Vous pouvez l'afficher dans la balise image par < img src = "la chaîne" />. Ou vous pouvez utiliser javascript pour faire tout ce que vous voulez ...

Source

2011-11-15 05:08:39

N'a pas fonctionné. J'ai un "instantané" vide lorsque j'ajoute ce code. –

Pouvez-vous vérifier que le code peut capturer tout sauf la vidéo? –

Je suis un peu un noob sur ce concept de toile. Je ne comprends pas ça. –

passer à window.open

canvas.onclick = function() { 
    window.open(canvas.toDataURL('image/png')); 
};

Exemple complet: http://www.nihilogic.dk/labs/canvas2image/

Source

2011-11-15 05:19:04 pradeek

J'ai déjà essayé cela, ça ne marche pas: S –

Oublié de mentionner que vous devez l'exécuter sous un serveur. Voir ici: http://www.html5rocks.com/en/tutorials/canvas/integrating/ – pradeek

Mais où puis-je l'ajouter? –

image vidéo HTML5 capture bitmap

Répondre

Questions connexes