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

| 我正在制作一个页面，允许网站管理员向其Twitter提要添加样式。这些样式中的几种在其显示中使用透明性。我想创建图像列表供他们选择。目前，我正在这样检查的背景上截图：但这不是我真正想要的。他们是捕获HTML元素图像并保持透明度的某种方法吗？编辑：我只是在研究这个，所以我遇到了新主题，例如HTML5 Canvas和-moz-element。是否可以使用-moz-element将画布背景设置为html元素，然后从画布中提取图像数据？除非有人在那里做，否则我将尝试此操作。编辑：-moz-element和canvas是一个死胡同。 -moz-element会将该项设置为背景，但不允许您保存背景图像。并且即使背景是普通图像，画布也不会保存其背景。

已邀请:

4 个回复

到街客核

它需要一点点工作，但是只要您正在布局HTML，它就是可行的。如果不保存这些页面并在本地对其进行编辑，则无法恢复已下载页面中标记的透明度。通过以不同的背景颜色多次渲染HTML元素，可以使用图像编辑器获得不透明度。您将需要一个不错的图像编辑器，我使用GIMP。在黑色，白色和中性灰色背景上渲染要保存的元素三遍（＃888）。使用屏幕捕获程序，捕获那些显示并将它们裁剪到完全相同的区域。在GIMP中，将这些图像作为图层打开，并按从上到下的顺序对它们进行黑色，白色和灰色排序。将顶部黑色图层设置为差异模式。这将在黑白层之间产生灰度差异。合并顶层。这将使我们剩下两层。灰色背景层和灰度差异。反转差异层的颜色，然后将其复制到剪贴板。在灰色背景图层上添加一个图层蒙版，然后将剪贴板粘贴到该图层蒙版中。删除灰度图层，然后在灰色背景图层上应用图层蒙版。那应该使一层的透明度与原始相似。不透明度稍微降低了一点，但是如果我们复制图层并将其与自身合并，那么它就在球场上。它可能不是像素完美的，但这是概念的证明。可以捕获HTML标记的不透明度。

冕偷淮款

您需要的是一种Web浏览器，它可以渲染到内存中的图像缓冲区而不是屏幕中。我的猜测是所有浏览器都可以做到这一点（应该是渲染器的一部分），但我不知道任何浏览器都可以访问此功能，至少不是从JavaScript可以访问。如果您下载WebKit的源代码，则应该有一些测试用例，它们的功能如下：-/

恋卡

不，没有软件可让您拍摄屏幕快照并保留单个视觉元素的透明度作为图像中的透明点，因为这不是屏幕截图的工作方式-屏幕快照是所见即所得，按定义，所有屏幕快照中的元素将始终具有非透明背景。我认为您最好的选择是将所需部分重新创建为图像，从而可以正常控制透明度。这不是最好的解决方案，但是如果您用相同的方式来做很多事情，那么对您来说，这比剪裁/编辑屏幕截图要快得多。

朗排谎纷瘟

使用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（）的文档在这里。

要回复问题请先登录或注册

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

4 个回复

发起人

html

image

transparency

gimp

问题状态

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

与内容相关的链接

4 个回复

发起人

html

image

transparency

gimp

问题状态