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

Question

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

但那不是我想要的.

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

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

编辑:-moz元素和画布是一个deadend.-moz-element将项目设置为背景,但不允许您保存背景图像.即使背景是普通图像,画布也不会保存背景.

Answer 1

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

1. 在黑色,白色和中性灰色背景上渲染要保存三次的元素(#888).

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

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

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

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

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

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

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

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

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