Czy możliwe jest renderowanie treści internetowych na przejrzystym tle za pomocą WebKit?

Próbuję ocenić możliwość wprowadzenia łatki do Webkita, która pozwoliłaby na renderowanie całej grafiki na całkowicie przezroczystym tle.

Pożądanym efektem jest renderowanie zawartości WWW bez żadnego tła, powinno się wydawać, że unosi się nad pulpitem (lub cokolwiek jest wyświetlane za oknem przeglądarki).

Czy ktoś widział aplikację robiącą to? (Mogę myśleć o niektórych emulatorów terminala, które mogą.) Jeśli ktoś pracował wewnątrz WebKit (a może Gecko?) do myślisz,że byłoby to możliwe?

Aktualizacja: zdałem sobie sprawę, że widżety pulpitu nawigacyjnego Mac OSX wykorzystują tę technikę. Więc to musi być możliwe.

Update 2: skompilowałem WebKit na Linuksie i zauważyłem opcje konfiguracji: 

--enable-dashboard-support
enable Dashboard support default=yes
Zbliżam się. Czy ktoś może pomóc?

Update 3: nadal znajduję odniesienia do tego w postach na różnych powiązanych mailingu listy.

Author: Paul D. Waite, 2008-11-28
Source

5 answers

Rozwiązany!

Poprzez ciągłe badania, przeszukiwanie forów i repozytoriów kodu źródłowego, zebrałem niezbędne kroki, aby to osiągnąć, używając tylko libwebkit i standardowego pulpitu compiz (każdy pulpit Xorg z compositingiem powinien to zrobić).

Dla bieżącego libwebkit (1.1.10-SVN) istnieje PPA Ubuntu: 
deb http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main

Jeśli chodzi o kod, kluczem jest wywołanie webkit_web_view_set_transparent.

I oczywiście system na którym go uruchamiasz powinien mieć sprawną kartę graficzną (intel, radeon lub nvidia) i uruchamianie menedżera okien (jak Compiz).

I wreszcie, aby rzeczywiście zobaczyć przezroczystość, oglądana zawartość musi ustawić przezroczyste tło za pomocą CSS3, w przeciwnym razie jest nadal całkowicie nieprzezroczysta.

To tak proste jak: 

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

Oto pełna próbka najprostszej możliwej aplikacji przeglądarki webkit z obsługą przezroczystości: 

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

Zrzut ekranu! http://i27.tinypic.com/2qntlxl.jpg

 26
Author: Mark Renouf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-16 16:34:25

W Safari 1.3 i 2 było ukryte menu debugowania (wywoływane przez Terminal: defaults write com.apple.Safari IncludeDebugMenu 1), które zawierało opcję "użyj przezroczystego okna".

Nie jestem pewien, czy to był WebKit, czy Safari.

(W Safari 3 wydaje się, że menu debugowania zostało zastąpione przez menu "rozwijaj" (Włącz w Preferencje > Zaawansowane), który nie ma opcji przezroczyste okno.)

 2
Author: Paul D. Waite,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-09 11:34:02

Zasadniczo chcesz ustawić przestrzeń kolorów ARGB, która będzie wysyłana do menedżera okien. Oczywiście tylko menedżery okien obsługujące compositing będą mogły z tego skorzystać.

Możesz porozmawiać z programistami screenlet i compiz, którzy powinni być w stanie pomóc więcej.

 1
Author: ewanm89,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-26 12:59:26

Ten gist działa dla mnie, od 2013, testowane tylko z ubuntu:

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

 1
Author: Pouria,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-03 16:07:17

Mam nowe rozwiązanie, które jest naprawdę łatwe do zrobienia, dla pojedynczego zrzutu ekranu. Używa węzła.js z fantomem.biblioteka js.

  1. Zainstaluj węzeł.js
  2. Uruchom 'npm install-g phantomjs' w konsoli / terminalu

  3. Zapisz następujący skrypt.js i uruchom go ze skryptu phantomjs konsoli.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. Zysk? :) enjoy
 1
Author: Eskel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-29 15:27:45