webkit - 是否可以使用 WebKit 在清晰的背景上呈现网页内容？

Question

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

期望的效果是呈现完全没有任何背景的 Web 内容，它应该看起来漂浮在桌面上（或浏览器窗口后面显示的任何内容）。

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

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

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

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

我越来越近了。任何人都可以帮忙吗？

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

score 30 · Accepted Answer

解决了！

通过持续的研究、搜索论坛和源代码存储库，我拼凑了必要的步骤，仅使用 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;
}

score 2 · Accepted Answer

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

不确定这是 WebKit 的事情还是 Safari 的事情。

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

安装 node.js
在控制台/终端中运行“npm install -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();
};

利润？：）请享用

webkit - 是否可以使用 WebKit 在清晰的背景上呈现网页内容？

5 回答 5

Related

Reference