Ist es möglich, Web-Inhalte über einen klaren Hintergrund mit WebKit zu machen?

Question

Ich versuche, die Möglichkeit eines Patches auf WebKit zu messen, die alle gerenderten Grafiken auf einen vollständig transparenten Hintergrund gerendert werden erlauben würde.

Der gewünschte Effekt ist bei allen Web-Inhalten ohne Hintergrund zu machen, soll es erscheinen über den Desktop zu schweben (oder was auch immer hinter dem Browserfenster angezeigt).

Hat jemand eine App tut dies gesehen? (Ich denke an einige Terminal-Emulatoren können, die können.) Wenn jemand innerhalb von WebKit gearbeitet hat (oder möglicherweise Gecko?) Denken Sie, es wäre möglich, dies zu tun?

---

Update: Ich bin gekommen, zu erkennen, dass Mac OS X Dashboard-Widgets genau dieses Verfahren verwenden. Also, das muss möglich sein.

---

Update 2: Ich habe kompiliert WebKit auf Linux und bemerkte die Konfigurationsoptionen sind:

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

Ich bin immer näher. Kann mir jemand helfen?

---

Aktualisieren. 3: ich weiterhin Verweise auf diese in Beiträgen auf verschiedenen artverwandten Mailing-Listen finden

• https://lists.webkit.org/pipermail/ webkit-dev / 2008-September / 005019.html
• https://lists.webkit.org/pipermail/ webkit-dev / 2009-Juni / 008182.html

Answer 1

Gelöst!

Durch kontinuierliche Forschung, Scheuern Foren und Quellcode-Repositorys, ich peiced zusammen die notwendigen Schritte, um diese mit nur libwebkit und einen Standard-Desktop Compiz (jede Xorg Desktop mit Compositing tun soll) zu erreichen.

Für eine aktuelle libwebkit (1.1.10-SVN), gibt es eine 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

Was der Code geht, wird der Schlüssel Aufruf webkit_web_view_set_transparent.

Und natürlich ist das System, das Sie es laufen auf sollte eine fähige Grafikkarte (Intel, radeon oder nvidia) und eine Compositing Window Manager ausgeführt werden (wie Compiz).

Und schließlich, um tatsächlich sehen die Transparenz, die Inhalte, die Sie gerade betrachten einen transparenten Hintergrund mit CSS3 setzen müssen, sonst ist es noch völlig undurchsichtig.

Es ist so einfach wie:

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

Hier ist die vollständige Probe für einfachste webkit Browser-Anwendung, mit Transparenz-Unterstützung:

#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

Zurück in Safari 1.3 und 2, war es ein verstecktes Debug-Menü (über das Terminal aufgerufen: defaults write com.apple.Safari IncludeDebugMenu 1)., Die eine „Use Transparent Window“ Option enthielt

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

Nicht sicher, ob dies eine WebKit Sache oder eine Safari Sache aber war.

(In Safari 3, das Debug-Menü scheint durch das „Entwickeln“ Menü ersetzt worden zu sein (enable in Einstellungen> Erweitert), die nicht die transparente Fenster Option hat).

Answer 3

Im Grunde wollen Sie den ARGB-Farbraum zu Einstellung des Window-Manager zu senden. Offensichtlich nur Window-Manager, die Compositing Unterstützung in der Lage, diesen Vorteil zu nehmen.

Sie möchten vielleicht die screenlet und Compiz-Entwickler sprechen sollten sie in der Lage sein, mehr zu helfen.

Answer 4

Dieser Kern funktioniert für mich, ab 2013 getestet nur mit ubuntu:

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

Answer 5

Ich habe eine neue Lösung, die wirklich einfach zu tun, für einen einzigen Screenshot. Es ist mit node.js mit phantom.js Bibliothek.

1. installieren node.js
2. run 'npm installieren -g PhantomJS' in der Konsole / Terminal

3. speichern Sie die folgenden als script.js und führen Sie es von der Konsole '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. Gewinn? :) genießen