如何捕获HTML元素的图像，并保持透明度？

Question

我正在开展一个允许网站管理员为其Twitter Feed添加样式的网页。其中一些样式在其显示中使用透明度。我想创建一个图像列表供他们选择。目前，我正在检查背景上截屏，例如：

但那不是我想要的。

他们的一些方法是捕获HTML元素的图像，并保持透明度吗？

编辑：我只是深入研究这个，所以我遇到了新的主题，比如HTML5 Canvas和-moz-element。是否可以使用-moz-element将画布背景设置为html元素，然后从画布中提取图像数据？我要去试试这个，除非有人在那里做过那件事让我失望。

编辑：-moz-element和canvas是一个deadend。 -moz-element将项目设置为背景，但不允许您保存背景图像。即使背景是普通图像，画布也不会保存背景。

Answer 1

它需要一些工作，但它是可行的，只要它是你正在布局的HTML。您无法恢复已下载页面中标记的透明度，而无需保存这些页面并在本地编辑它们。通过在不同的背景颜色上多次渲染HTML元素，可以使用图像编辑器导出不透明度。你需要一个像样的图像编辑器，我使用GIMP。

1. 在黑色，白色和中性灰色背景上渲染要保存三次的元素（＃888）。

2. 使用屏幕捕获程序捕获这些显示并将它们裁剪到完全相同的区域。

3. 在GIMP中，将这些图像打开为图层，并从上到下将它们分为黑色​​，白色和灰色。

4. 将顶部黑色图层设置为差异模式。这将在黑色和白色层之间产生灰度差异。

5. 合并顶层。这将给我们留下两层。灰色背景层和灰度差异。反转差异图层的颜色，并将其复制到剪贴板。

6. 将图层蒙版添加到灰色背景图层并将剪贴板粘贴到图层蒙版中。

7. 删除灰度图层并在灰色背景图层上应用图层蒙版。这应该留下一层与原始层不相似的不透明度。

8. 不透明度有点偏差，但如果我们复制图层并将其与自身合并，它就在球场上。

它可能不是像素完美，但它是概念的证明。可以捕获HTML标记的不透明度。

Answer 2

您需要的是一个可以渲染到内存中的图像缓冲区而不是屏幕的Web浏览器。

我的猜测是所有浏览器都可以执行此操作（应该是渲染器的一部分），但我不知道任何可以访问此功能的浏览器，至少不是来自JavaScript。

如果您下载WebKit源代码，则应该有类似的测试用例： - /

Answer 3

不，没有软件可以让你截取屏幕截图并保持单个视觉元素的透明度作为图像中的透明点，因为这不是截图的工作原理 - 截图是WYSIWYG，根据定义，你的所有元素屏幕截图始终具有不透明的背景。

我认为这里最好的选择是将所需部分重新创建为图像，您可以在其中正常控制透明度。这不是最好的解决方案，但是如果你使用相同类型的东西做很多事情，那么对你来说要快得多，而不是裁剪/编辑截图。

Answer 4

使用Puppeteer使得此操作更加容易。它在内存中运行网页。

启动本地文件服务器-python -m SimpleHTTPServer 8080

然后这个脚本应该可以解决问题：

const puppeteer = require('puppeteer')

;(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('http://localhost:8080/index.html', {
    waitUntil: 'networkidle0'
  })
  const elements = await page.$('body')
  await page.evaluate(() => (document.body.style.background = 'transparent'))
  await elements.screenshot({ path: 'myImg.png', omitBackground: true })
  await browser.close()
})()

.screenshot() are here的文档。