拍摄快照 - 有没有办法让 drawImage 和 toDataURL 保留过滤器？答案

【问题标题】：taking snapshots - is there a way for drawImage & toDataURL to preserve filters?拍摄快照 - 有没有办法让 drawImage 和 toDataURL 保留过滤器？
【发布时间】：2023-03-24 00:45:01
【问题描述】：

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

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

【问题讨论】：

标签： css html5-video html5-canvas

【解决方案1】：

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

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

【讨论】：

Mikko，感谢您的回答。但是，如果我尝试通过画布推送内容，例如过滤快照画布：snapshot.className='';snapshot.classList.add('grayscale');，当我执行var img = snapshot.toDataURL(); 时，我仍然会得到原始图像。要么我没有得到简单的东西，要么没有办法做我想做的事。对于像画布这样强大的功能来说，不让访问它在屏幕上显示的内容似乎是违反直觉的。它必须存储在某个地方！
画布像素内容和你的网站 CSS 效果组合得到的都是完全不同的东西。那是我试图告诉你的。 如果要存储它们，请使用画布 API 对画布像素级别进行效果
你的意思是我已经用 getImageData()\putImageData() 做的那样？所以你对我的问题的回答似乎是“不”。我不明白为什么会这样，到目前为止，我认为这是 API 的一个缺点。
如果你在 CSS 上做 web 效果，它们不会影响画布像素的值。这不是 API 的缺点，它的设计原因有很多（安全性、网页组成、浏览器的工作方式等）