如何编辑视频的快照?
how to edit snapshot from a video?
我正在通过 getUserMedia 从我的计算机加载视频,我使用 canvas 拍摄快照。但是当我尝试编辑下面的代码时,我做不到。
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
这是因为当您设置新尺寸时-即使尺寸相同,canvas也会重置状态。可以在设置新大小后通过设置行内容来修复
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';
}
我正在通过 getUserMedia 从我的计算机加载视频,我使用 canvas 拍摄快照。但是当我尝试编辑下面的代码时,我做不到。
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
这是因为当您设置新尺寸时-即使尺寸相同,canvas也会重置状态。可以在设置新大小后通过设置行内容来修复
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';
}