Question

我正在尝试测量WebKit补丁的可能性，这将允许所有渲染的图形渲染到完全透明的背景上。

所需的效果是渲染没有任何背景的Web内容，它应该浮动在桌面上（或浏览器窗口后面显示的任何内容）。

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

更新：我已经意识到Mac OSX仪表板小部件使用了这种精确的技术。所以，这一定是可能的。

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

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

我越来越近了。有人可以帮忙吗？

更新3：我会继续在各种相关邮件列表的帖子中找到对此的引用。

Answer 1

<强>解决！

通过不断的研究，搜索论坛和源代码存储库，我将使用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_web_view_set_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;
}

Answer 2

回到Safari 1.3和2，有一个隐藏的调试菜单（通过终端调用：defaults write com.apple.Safari IncludeDebugMenu 1），其中包含“使用透明窗口”选项。

不确定这是WebKit的东西还是Safari的东西。

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

Answer 3

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

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

Answer 4

这个要点对我有用，截至2013年，仅使用ubuntu测试：

https://gist.github.com/pouria-mellati/7771779

Answer 5

对于单个屏幕截图，我有一个非常容易实现的新解决方案。它使用node.js和phantom.js库。

安装node.js
在控制台/终端

将以下内容保存为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();
};

利润是多少？ :)享受

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

5 个答案: