Question

我有一个视频元素，其中应用了用户选择的过滤器。当我尝试拍摄快照时，应用于视频的过滤器不会应用于快照：

// live is a video element and snapshot is a canvas
function onTakeSnapshot() {

    // Make the canvas the same size as the video
    snapshot.width = live.clientWidth;
    snapshot.height = live.clientHeight;
    // Draw a frame of the live video onto the canvas
    var c = snapshot.getContext("2d");
    c.drawImage(live, 0, 0, snapshot.width, snapshot.height);
    snapshot.style.opacity = 1;
}

我意识到我可以将相同的过滤器应用于快照，例如snapshot.className='';snapshot.classList.add('grayscale');但是我遇到了将其保存到磁盘的相同问题，即var img = snapshot.toDataURL();导致图像没有任何适用于它的过滤器。我目前使用getImageData()\putImageData()单独操作图像，但结果通常与画布+过滤器不同。我是画布的新手，想知道是否有一种方法可以使用已应用的滤镜绘制和保存图像。谢谢！

Answer 1

无法在浏览器中截取您的问题所暗示的网页截图。

如果您需要保存结果，我建议您通过<canvas>推送所有过滤代码。

拍摄快照 - drawImage和amp;有没有办法toDataURL来保留过滤器？

1 个答案: