Wie kann ich einen Schnappschuss von einem Video bearbeiten?

Question

Ich lade Video von meinem Computer über getUserMedia, ich mache einen Schnappschuss mit Canvas. Aber wenn ich versuche, durch Code unten zu bearbeiten, kann ich nicht.

var canvas = document.querySelector("canvas") 
var ctx = canvas.getContext('2d'); 
var sketch = document.getElementById("sketch") 
var sketch_style = getComputedStyle(sketch) 
canvas.width = parseInt(sketch_style.getPropertyValue('width')) 
canvas.height = parseInt(sketch_style.getPropertyValue('height')) 
var mouse = {x: 0, y: 0} 
var last_mouse = {x: 0, y: 0} 

/* Mouse Capturing Work */ 
canvas.addEventListener('mousemove', function(e) { 
    last_mouse.x = mouse.x; 
    last_mouse.y = mouse.y; 

    mouse.x = e.pageX - this.offsetLeft; 
    mouse.y = e.pageY - this.offsetTop; 
}, false); 

/* Drawing on Paint App */ 
ctx.lineWidth = 5; 
ctx.lineJoin = 'round'; 
ctx.lineCap = 'round'; 
/* Posso fazer um switch case aqui pra escolher uma cor */ 
ctx.strokeStyle = 'blue'; 

canvas.addEventListener('mousedown', function(e) { 
     canvas.addEventListener('mousemove', onPaint, false); 
}, false); 

canvas.addEventListener('mouseup', function() { 
     canvas.removeEventListener('mousemove', onPaint, false); 
}, false); 

var onPaint = function() { 
    ctx.beginPath(); 
    ctx.moveTo(last_mouse.x, last_mouse.y); 
    ctx.lineTo(mouse.x, mouse.y); 
    ctx.closePath(); 
    ctx.stroke(); 
}; 
function snapshot() { 
    canvas.width = 500; 
    canvas.height = 300; 
    ctx.drawImage(videoNode, 0, 0, canvas.width, canvas.height); 

} 
foto.addEventListener('click', snapshot, false); 

ich Linien setzen kann, aber sie verändern nicht die Farbe, Dicke, etc ... Ich habe die Electron bin mit einer Desktop-Web-Anwendung auszuführen. Kann mir jemand helfen?? : D

Snapshot on Electron

Answer 1

Es ist, weil, wenn Sie neue Größe -Auch gesetzt, wenn es die gleiche Größe ist, wird die Leinwand, um den Zustand zurückgesetzt. kann behoben werden, indem man Zeilenmaterial einstellt, nachdem die neue Größe eingestellt wurde

function snapshot() { 
    canvas.width = 500; 
    canvas.height = 300; 
    ctx.drawImage(videoNode, 0, 0, canvas.width, canvas.height); 

    // set line stuff here <===================== 
    ctx.lineWidth = 5; 
    ctx.lineJoin = 'round'; 
    ctx.lineCap = 'round'; 
    /* Posso fazer um switch case aqui pra escolher uma cor */ 
    ctx.strokeStyle = 'blue'; 
}