Можно ли отображать веб-контент на чистом фоне с помощью WebKit?

Решено!

В ходе продолжающихся исследований, изучения форумов и репозиториев исходного кода я собрал воедино необходимые шаги для достижения этой цели, используя только 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;
}

Еще в Safari 1.3 и 2 было скрытое меню отладки (вызывается через Терминал: defaults write com.apple.Safari IncludeDebugMenu 1), которое включало параметр «Использовать прозрачное окно».

• http://www.macosxhints.com/article.php?story=20050418015445258
• http://www.wiredatom.com/blog/2005/10/20/safari-transparency/

Не уверен, что это было связано с WebKit или Safari.

(В Safari 3 меню отладки, кажется, было заменено меню «Разработка» (включено в «Настройки»> «Дополнительно»), в котором нет опции прозрачного окна.)

По сути, вы хотите настроить цветовое пространство ARGB для отправки диспетчеру окон. Очевидно, что только оконные менеджеры, поддерживающие композитинг, смогут воспользоваться этим преимуществом.

Возможно, вы захотите поговорить с разработчиками screenlet и compiz, они должны помочь больше.

Этот смысл работает для меня по состоянию на 2013 год, проверен только с Ubuntu:

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

У меня есть новое решение, которое действительно легко сделать для одного снимка экрана. Он использует node.js с библиотекой phantom.js.

1. установить node.js
2. запустите «npm install -g phantomjs» в консоли/терминале

3. сохраните следующее как 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();
   };
   

4. выгода? :) наслаждаться