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

Question

我正在制作一个页面，让网站管理员可以为他们的Twitter Feed添加样式。其中几个样式在显示时使用了透明度。我想为他们创建一个可供选择的图像列表。目前，我正在使用类似于这样的背景截图： 但那并不是我想要的。

有没有一种方法可以捕捉HTML元素的图像，并保持透明度？

编辑：我刚刚开始研究这个问题，所以我遇到了新的主题，比如HTML5 Canvas和-moz-element。是否可能使用-moz-element将画布背景设置为HTML元素，然后从画布中提取图像数据？除非有人阻止我，否则我打算尝试这个方法。

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

- BentFX

---

在HTML文档上？你是指屏幕截图吗？ - breezy

是的，这是HTML标记。我想要一张保持HTML元素透明度的图片。我猜截图并不是正确的词，因为截图不能做到我想要的效果。 - BentFX

也许你应该只显示实际预览（页面中的 HTML 和 CSS）？ - Andrea

@Taze T. Schnitzel - 我已经考虑过这个问题，并认为这是一种可能性。它似乎可能会变成 CSS 地狱。通过适当的命名方案，应该是可行的，但图像仍然更简单。 - BentFX

Answer 1

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

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

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

3. 在GIMP中将这些图像作为层打开，并按从上到下的顺序排列为黑色、白色和灰色。

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

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

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

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

8. 不透明度有点偏差，但如果我们复制图层并将其与自身合并，就可以得到正确的结果。

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

- BentFX

---

+1 有趣的解决方案。通过使用像SWT中的嵌入式浏览器，您可能能够自动化大部分过程。 - Aaron Digulla

Answer 2

使用 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() 的文档在这里

- spencercooly

Answer 3

你需要的是一款能够将网页渲染成内存中的图像缓冲区而不是屏幕的浏览器。

我猜所有的浏览器都可以做到这一点（这应该是渲染器的一部分），但我不知道有哪个浏览器可以从JavaScript访问此功能。

如果你下载WebKit源代码，应该会有类似于这样的测试用例 :-/。

- Aaron Digulla

---

这与我的期望相符，也符合我的想法。但我希望能找到现有的解决方案。我无法学习新的编程语言来解决这个问题。:) （但我会查看 WebKit 的示例，看看是否可以进行少量编辑并可用）谢谢！ - BentFX

嗯，WebKit的自动化测试应该在构建过程中运行。因此，这种方法应该让你接近你想要的目标。 - Aaron Digulla

我在WebKit的路上并没有走得太远。我去了freenode.net上的#WebKit irc，被告知现有代码无法实现这一点。 - BentFX

嘿，亚伦，抱歉我拿走了你的检查。大约六个月前，我找到了答案，但直到最近才开始写它。如果那些负责代码的人认为这是一个选项，你的解决方案将是完美的。我的解决方案有效，并且一旦你掌握了工作流程，就可以快速从整个屏幕元素中恢复不透明度。再次感谢！ - BentFX

Answer 4

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

我认为你最好的选择是将所需部分重新创建为图像，这样你就可以正常控制透明度。虽然这不是最好的解决方案，但如果你经常使用相同类型的东西进行操作，这将比裁剪/编辑截图快得多。

- rlb.usa