비디오에서 스냅 샷을 편집하는 방법은 무엇입니까?

Question

내 컴퓨터에서 getUserMedia를 통해 비디오를로드하고 있는데, 캔버스로 스냅 샷을 찍습니다. 그러나 아래의 코드를 편집하려고하면 할 수 없습니다.

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

내가 선을 넣을 수 있습니다,하지만 그들은 색상, 두께 등을 변경하지 마십시오 ... 나는 데스크탑 웹 응용 프로그램을 수행 할 수 Electron을 사용하고 있습니다. 누군가가 나를 도울 수 있습니까 ?? : 그것은 같은 크기의 경우 새 크기 -even을 설정하면 캔버스가 상태를 재설정하기 때문에 D

Snapshot on Electron

Answer 1

을 그것입니다. 새 크기를 설정 한 후 라인을 설정하여 문제를 해결할 수 있습니다.

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'; 
}