是否可以使用WebKit在清晰的背景上呈现web内容？

我正在尝试评估WebKit补丁的可能性，它允许所有渲染的图形都渲染到完全透明的背景上

理想的效果是在没有任何背景的情况下呈现web内容，它应该显示为漂浮在桌面上（或显示在浏览器窗口后面的任何内容）

有人见过这样的应用程序吗？（我可以想到一些终端模拟器可以。）如果有人在WebKit内部工作过（或者可能是Gecko？），你认为有可能做到这一点吗

---

更新：我逐渐意识到MacOSX仪表板小部件使用的正是这种技术。所以，这一定是可能的

---

更新2:我已经在linux上编译了WebKit，并注意到配置选项包括：

--enable-dashboard-support
enable Dashboard support default=yes

我越来越近了。有人能帮忙吗

---

更新3:我继续在各种相关邮件列表的帖子中找到这方面的参考资料

---

基本上，您需要设置要发送到窗口管理器的ARGB颜色空间。显然，只有支持合成的窗口管理器才能利用这一点

---

您可能想与screenlet和compiz开发人员谈谈，他们应该能够提供更多帮助。

回到Safari 1.3和2中，有一个隐藏的调试菜单（通过终端调用：

defaults write com.apple.Safari IncludeDebugMenu 1

），其中包含一个“使用透明窗口”选项

不确定这是WebKit还是Safari

---

（在Safari 3中，调试菜单似乎已被没有透明窗口选项的“开发”菜单（在首选项>高级中启用）所取代。）

已解决

通过不断的研究、搜索论坛和源代码存储库，我只使用libwebkit和标准compiz桌面（任何带有合成功能的Xorg桌面都可以）就完成了这项工作

对于当前的libwebkit（1.1.10-SVN），有一个Ubuntu PPA：

deb http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main

就代码而言，关键是调用

webkit\u web\u view\u set\u transparent

当然，您运行它的系统应该有一个功能强大的图形卡（intel、radeon或nvidia），并运行一个合成窗口管理器（如Compiz）

最后，要真正看到透明度，您正在查看的内容必须使用CSS3设置透明背景，否则它仍然是完全不透明的

简单到：

BODY { background-color: rgba(0,0,0,0); }

以下是最简单的webkit浏览器应用程序的完整示例，具有透明度支持：

#include <gtk/gtk.h>
#include <webkit/webkit.h>

static void destroy_cb(GtkWidget* widget, gpointer data) {
  gtk_main_quit();
}

int main(int argc, char* argv[]) {
  gtk_init(&argc, &argv);

  if(!g_thread_supported())
    g_thread_init(NULL);

  // Create a Window, set colormap to RGBA
  GtkWidget* window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  GdkScreen *screen = gtk_widget_get_screen(window);
  GdkColormap *rgba = gdk_screen_get_rgba_colormap (screen);

  if (rgba && gdk_screen_is_composited (screen)) {
    gtk_widget_set_default_colormap(rgba);
    gtk_widget_set_colormap(GTK_WIDGET(window), rgba);
  }

  gtk_window_set_default_size(GTK_WINDOW(window), 800, 800);
  g_signal_connect(window, "destroy", G_CALLBACK(destroy_cb), NULL);

  // Optional: for dashboard style borderless windows
  gtk_window_set_decorated(GTK_WINDOW(window), FALSE);


  // Create a WebView, set it transparent, add it to the window
  WebKitWebView* web_view = web_view = WEBKIT_WEB_VIEW(webkit_web_view_new());
  webkit_web_view_set_transparent(web_view, TRUE);
  gtk_container_add (GTK_CONTAINER(window), GTK_WIDGET(web_view));

  // Load a default page
  webkit_web_view_load_uri(web_view, "http://stackoverflow.com/");

  // Show it and continue running until the window closes
  gtk_widget_grab_focus(GTK_WIDGET(web_view));
  gtk_widget_show_all(window);
  gtk_main();
  return 0;
}

#包括
#包括
静态void destroy_cb（GtkWidget*小部件，gpointer数据）{
gtk_main_quit（）；
}
int main（int argc，char*argv[]）{
gtk_init（&argc，&argv）；
如果（！g_thread_supported（））
g_thread_init（NULL）；
//创建一个窗口，将colormap设置为RGBA
GtkWidget*window=gtk_window_new（gtk_window_TOPLEVEL）；
GdkScreen*screen=gtk_小部件_获取_屏幕（窗口）；
GdkColormap*rgba=gdk_屏幕_获取_rgba_彩色地图（屏幕）；
如果（rgba和gdk屏幕是合成的（屏幕））{
gtk_widget_set_default_colormap（rgba）；
gtk_小部件_设置_颜色映射（gtk_小部件（窗口），rgba）；
}
gtk_窗口设置默认大小（gtk_窗口（窗口），800800）；
g_信号连接（窗口，“销毁”，g_回调（销毁cb），空）；
//可选：用于仪表板样式的无边框窗口
gtk_窗_套_装饰（gtk_窗（窗），假）；
//创建WebView，将其设置为透明，然后将其添加到窗口
WebKitWebView*web\u view=web\u view=WEBKIT\u web\u view（WEBKIT\u web\u view\u new（））；
webkit\u web\u view\u set\u transparent（web\u view，TRUE）；
gtk_容器添加（gtk_容器（窗口）、gtk_小部件（web_视图））；
//加载默认页面
webkit\u web\u视图\u加载\u uri（web\u视图，“http://stackoverflow.com/");
//显示并继续运行，直到窗口关闭
gtk_小部件抓取焦点（gtk_小部件（web_视图））；
gtk_小部件_全部显示（窗口）；
gtk_main（）；
返回0；
}

---

从2013年起，这一要点适用于我，仅在ubuntu上测试过：

---

我有一个新的解决方案，非常简单，只需一个屏幕截图。它使用node.js和phantom.js库

安装node.js

在控制台/终端中运行“npm安装-g phantomjs”

将以下内容另存为script.js并从控制台“phantomjs script.js”运行

var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1500 };
page.open("http://www.theWebYouWantToRender");
page.onLoadFinished = function(status) {
    page.evaluate(function() {
        document.body.style.background = 'transparent';
    });

    page.render('render.png');
    phantom.exit();
};

利润？：）享受

---

我同意，这是一半。但是如何在网页中设置背景色，使最终渲染的图像不总是不透明的呢。它是否像设置BODY{opacity:0；}那样简单？应该是，但不确定。compiz/screenlet的家伙们已经开始渲染桌面部件类的窗口了。我认为他们甚至使用webkit（事实上，我认为已经有了一个桌面部件渲染解决方案，适用于每个主要的渲染引擎，现在可能接受gecko）。据我所知，这些屏幕部件都是由Python直接控制的Gtk/Cairo。我在他们的文档中找不到对WebKit的任何引用。就网页而言，不透明属性应用于HTML元素的内容及其背景，因此BODY{opacity:0；}会使BODY标记内的所有内容都不可见。我认为WebKit支持alpha透明的颜色值，所以您可以使用body{background color:rgba（0,0,0,0）；}。我认为背景颜色的默认值是透明的，所以你可能不需要设置它。如果可以的话，你可以尝试为AdobeAIR平台构建。有几种方法可以做到这一点。我意识到这是可能的，但由于许可要求（目标是嵌入式播放器），这并不理想，我们正试图保持尽可能不编号。我意识到有些来自Adobe的补丁似乎还没有回到WebKit中。（Gtk构建中的无窗口插件支持是一个主要的支持）。感谢您的提示。这让我很恼火