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

问题描述

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

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

这是我的代码示例：

/* 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 中的特定元素进行屏幕截图：

检查您要捕获的元素。
使用 Cmd + Shift + P / Ctrl + Shift + P 打开命令菜单。
输入屏幕截图。
您现在可以仅捕获特定元素的屏幕截图、视口屏幕截图或整页屏幕截图。

在我的例子中，我有许多.container带有自己覆盖文本的元素，我希望允许用户将.containerDOM 元素作为单个图像下载。

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

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

标签： javascriptdomscreenshot

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

问题描述

解决方案

推荐阅读