捕获特定DOM元素的屏幕截图（vanllla 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. 您现在可以仅捕获特定元素的屏幕截图，视口屏幕截图或整页屏幕截图。

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

正如@ Abhay-Sehgal所建议的，我可以将它们显示为独立的图像，然后在用户保存页面时，他们拥有html代码和其中包含所有图像的bundle文件夹。但是，为了执行此步骤，我需要生成这些DOMs元素的图像，并将其文本嵌入其中。

是否可以通过编程方式从控制台中获取DOM元素的屏幕截图？
（甚至只是通过运行一些原始的javascript代码而不是通过浏览器的用户界面来实现）

Answer 1

Firefox具有该功能。不了解其他主流浏览器。
firefox console screenshotter description 通过:screenshot --selector '#hot-network-questions'

拍摄的图像