2

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

// 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()但结果通常与画布+过滤器不同。我是画布的新手，想知道是否有一种方法可以绘制和保存已应用过滤器的图像。谢谢！

4

1 回答 1

0

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

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

于 2012-11-17T13:17:07.430 回答