4

我正在开发一个页面，该页面将允许网站管理员将样式添加到他们的 twitter 提要中。其中一些样式在其显示中使用透明度。我想创建一个图像列表供他们选择。目前，我正在检查背景上截取屏幕截图，例如：

在此处输入图像描述

但这并不是我真正想要的。

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

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

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

4

4 回答 4

9

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

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

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

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

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

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

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

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

  8. 不透明度稍微下降了一点，但如果我们复制图层并将其与自身合并，它就在球场上。

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

DerivedOpacity.jpg

于 2012-11-04T22:28:19.123 回答
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()的文档在这里。

于 2019-11-05T15:17:56.510 回答
1

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

我的猜测是所有浏览器都可以做到这一点（这应该是渲染器的一部分），但我不知道有任何浏览器可以访问这个函数，至少不能从 JavaScript 访问。

如果你下载 WebKit 源代码，应该有测试用例做类似的事情：-/

于 2011-05-18T16:03:02.633 回答
-1

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

我认为您最好的选择是将所需部分重新创建为图像，您可以在其中正常控制透明度。这不是最好的解决方案，但如果你用相同的东西做很多事情，它会比裁剪/编辑屏幕截图快得多。

于 2011-05-18T16:00:47.287 回答