Capturing HTML5 video clip to bitmap

Question

I got this script:

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]); } } 

What I want to do is export a snapshot to a bitmap. I read that I can use this line:

 canvas.toDataURL('image/jpeg'); 

But I don’t know where to add it.

Any ideas?

Answer 1

ctx.drawImage (video, 0, 0, w, h); canvas.toDataURL (...)

toDataURL will return you a string, which is usually the contents of a base64 encoded image (file). You can display it in the image tag using <img src = "string" / ">. Or you can use javascript to do whatever you want ...

Answer 2

Pass it to window.open

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

Full example: http://www.nihilogic.dk/labs/canvas2image/