È possibile eseguire il rendering di contenuti Web su uno sfondo chiaro utilizzando WebKit?

Question

Sto cercando di valutare la possibilità di una patch per WebKit che consentirebbe il rendering di tutta la grafica renderizzata su uno sfondo completamente trasparente.

L'effetto desiderato è il rendering del contenuto Web senza alcun background, dovrebbe fluttuare sul desktop (o qualsiasi cosa sia visualizzata dietro la finestra del browser).

Qualcuno ha visto un'app farlo? (Posso pensare ad alcuni emulatori di terminale che possono.) Se qualcuno ha lavorato all'interno di WebKit (o forse Gecko?) Pensi che sarebbe possibile farlo?

---

Aggiornamento: ho capito che i widget del dashboard di Mac OSX utilizzano questa tecnica esatta. Quindi, questo deve essere possibile.

---

Aggiornamento 2: ho compilato WebKit su Linux e ho notato che le opzioni di configurazione includono:

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

Mi sto avvicinando. Qualcuno può aiutare?

---

Aggiornamento 3: continuo a trovare riferimenti a questo nei post su varie mailing list correlate.

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

Answer 1

Risolto!

Attraverso la ricerca in corso, i forum di purga e i repository di codice sorgente, ho messo insieme i passi necessari per raggiungere questo obiettivo usando solo libwebkit e un desktop compiz standard (qualsiasi desktop Xorg con composizione dovrebbe fare).

Per un libwebkit attuale (1.1.10-SVN), esiste un 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

Per quanto riguarda il codice, la chiave sta chiamando webkit_web_view_set_transparent .

E ovviamente il sistema su cui lo stai eseguendo dovrebbe avere una scheda grafica capace (intel, radeon o nvidia) ed eseguire un window manager di composizione (come Compiz).

E infine, per vedere effettivamente la trasparenza, il contenuto che stai visualizzando deve impostare uno sfondo trasparente usando CSS3, altrimenti è ancora completamente opaco.

È semplice come:

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

Ecco "l'esempio completo per l'app per browser webkit più semplice possibile, con supporto per la trasparenza:

#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

Indietro in Safari 1.3 e 2, c'era un menu di debug nascosto (invocato tramite il Terminale: impostazioni predefinite scrivi com.apple.Safari IncludeDebugMenu 1 ) che includeva un & # 8220; Usa finestra trasparente & # 8221; opzione.

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

Non sono sicuro che si tratti di una cosa WebKit o di una cosa Safari.

(In Safari 3, il menu di debug sembra essere stato sostituito dal menu & # 8220; Develop & # 8221; (abilita in Preferenze > Avanzate) che non ha & # 8217; t ha l'opzione di finestra trasparente.)

Answer 3

Fondamentalmente si desidera impostare lo spazio colore ARGB da inviare al gestore delle finestre. Ovviamente solo i gestori di finestre che supportano la composizione potranno trarne vantaggio.

Potresti voler parlare con lo screenlet e compiz gli sviluppatori che dovrebbero essere in grado di aiutare di più.

Answer 4

Questa sintesi funziona per me, a partire dal 2013, testata solo con Ubuntu:

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

Answer 5

Ho una nuova soluzione che è davvero facile da fare, per un singolo screenshot. Sta usando node.js con la libreria phantom.js.

1. installa node.js
2. esegui 'npm install -g phantomjs' in console / terminale

3. salva quanto segue come script.js ed eseguilo dalla console '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. L'utile? :) divertiti