javascript - HTML5 video frame capture to bitmap - Stack Overflow

admin管理员组

文章数量:1024615

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 the snapshot to a bitmap image. I read that I could use this line:

canvas.toDataURL('image/jpeg');

But I don't know where to add it.

Any ideas?

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 the snapshot to a bitmap image. I read that I could use this line:

canvas.toDataURL('image/jpeg');

But I don't know where to add it.

Any ideas?

• javascript
• html5-video
• html5-canvas

Share Improve this question Follow edited Nov 15, 2011 at 5:03 Aaron Dufour 17.5k11 gold badge5151 silver badges7171 bronze badges asked Nov 14, 2011 at 21:41 Alejandro ArAlejandro Ar 55311 gold badge77 silver badges1414 bronze badges 3

• When do you want to export the snapshot as a bitmap? Its not clear how you want this to work - when shoot is called? When the canvas is clicked? Some other condition? While we're at it, image/jpeg is not a bitmap type - which do you want? – Aaron Dufour Commented Nov 15, 2011 at 4:52
• It's called when the user clicks a button. – Alejandro Ar Commented Nov 15, 2011 at 17:14
• What I want is to be able to save the image as a jpeg or png with a right click when the image is generated. – Alejandro Ar Commented Nov 15, 2011 at 17:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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

Pass it to window.open

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

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

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 the snapshot to a bitmap image. I read that I could use this line:

canvas.toDataURL('image/jpeg');

But I don't know where to add it.

Any ideas?

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 the snapshot to a bitmap image. I read that I could use this line:

canvas.toDataURL('image/jpeg');

But I don't know where to add it.

Any ideas?

• javascript
• html5-video
• html5-canvas

Share Improve this question Follow edited Nov 15, 2011 at 5:03 Aaron Dufour 17.5k11 gold badge5151 silver badges7171 bronze badges asked Nov 14, 2011 at 21:41 Alejandro ArAlejandro Ar 55311 gold badge77 silver badges1414 bronze badges 3

• When do you want to export the snapshot as a bitmap? Its not clear how you want this to work - when shoot is called? When the canvas is clicked? Some other condition? While we're at it, image/jpeg is not a bitmap type - which do you want? – Aaron Dufour Commented Nov 15, 2011 at 4:52
• It's called when the user clicks a button. – Alejandro Ar Commented Nov 15, 2011 at 17:14
• What I want is to be able to save the image as a jpeg or png with a right click when the image is generated. – Alejandro Ar Commented Nov 15, 2011 at 17:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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

Pass it to window.open

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

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

本文标签： javascriptHTML5 video frame capture to bitmapStack Overflow