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来执行桌面Web应用程序。有人能帮我吗？？：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';
}

如何从视频编辑快照？

1 个答案: