javascript - 捕获特定 DOM 元素的屏幕截图 (vanilla js)

Question

我有一张图像用作背景，然后我在这张“卡片”上显示不同的消息。

我需要将文本和图像作为单个文件下载。

这是我的代码示例:

/* Container holding the image and the text */

.container {
  position: relative;
  text-align: center;
  color: white;
}


/* Centered text */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="centered">Overlay text</div>
</div>

我发现有一种方法可以按照以下步骤截取 DOM 中特定元素的屏幕截图:

1. 检查您想要捕获的元素。
2. 使用 Cmd + Shift + P/Ctrl + Shift + P 打开命令菜单。
3. 输入屏幕截图。
4. 您现在可以仅捕获特定元素的屏幕截图、视口(viewport)屏幕截图或全页屏幕截图。

就我而言，我有许多带有自己的覆盖文本的 .container 元素，我希望允许用户将 .container DOM 元素下载为单个图像.

正如 @Abhay-Sehgal 所建议的，我可以将它们显示为独立的图像，然后当用户保存页面时，他们将获得 html 代码和包含所有图像的捆绑文件夹。但为了完成这一步，我需要生成这些 DOM 元素的图像，并在其中嵌入文本。

有没有办法以编程方式从控制台获取 DOM 元素的屏幕截图？
(或者甚至只是运行一些普通的 JavaScript 代码，而不是通过浏览器的 UI)

Answer 1

Firefox 有这个功能。不知道其他主流浏览器怎么样
firefox console screenshotter description 通过 :screenshot --selector '#hot-network-questions' 拍摄的图像