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

Ответ 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); }

Здесь приведен полный образец простейшего веб-браузера с поддержкой прозрачности:

#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;
}

Снимок экрана! http://i27.tinypic.com/2qntlxl.jpg

Ответ 2

Назад в Safari 1.3 и 2, было скрытое меню отладки (вызванное через Terminal: 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 меню отладки, похоже, было заменено меню "Развить" (включить в настройках > Дополнительно), который не имеет опции прозрачного окна.)

Ответ 3

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

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

Ответ 4

Этот метод работает для меня, начиная с 2013 года, тестируется только с помощью ubuntu:

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

Ответ 5

У меня есть новое решение, которое действительно легко сделать для одного снимка экрана. Он использует 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();
  };
  

• прибыль?:) наслаждайтесь