¿Es posible renderizar contenido web sobre un fondo claro usando WebKit?

Question

Estoy tratando de evaluar la posibilidad de un parche para WebKit que permita que todos los gráficos renderizados se representen en un fondo totalmente transparente.

El efecto deseado es representar el contenido web sin ningún fondo, debe aparecer flotando sobre el escritorio (o lo que se muestre detrás de la ventana del navegador).

¿Alguien ha visto una aplicación hacer esto? (Puedo pensar en algunos emuladores de terminal que pueden hacerlo). Si alguien ha trabajado dentro de WebKit (¿o posiblemente Gecko?) ¿Crees que sería posible hacer esto?

---

Actualización: me he dado cuenta de que los widgets del panel de Mac OSX utilizan esta técnica exacta. Entonces, esto debe ser posible.

---

Actualización 2: he compilado WebKit en Linux y noté que las opciones de configuración incluyen:

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

Me estoy acercando. ¿Alguien puede ayudar?

---

Actualización 3: Sigo encontrando referencias a esto en publicaciones en varias listas de correo relacionadas.

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

Answer 1

¡Resuelto !

A través de la investigación en curso, revisando foros y repositorios de código fuente, analicé los pasos necesarios para lograr esto usando solo libwebkit y un escritorio de compilación estándar (cualquier escritorio Xorg con composición debería hacer).

Para un libwebkit actual (1.1.10-SVN), hay un PPA de Ubuntu:

deb http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main

En lo que respecta al código, la clave está llamando a webkit_web_view_set_transparent .

Y, por supuesto, el sistema en el que lo está ejecutando debe tener una tarjeta gráfica capaz (Intel, Radeon o NVIDIA) y estar ejecutando un administrador de ventanas de composición (como Compiz).

Y finalmente, para ver realmente la transparencia, el contenido que está viendo debe establecer un fondo transparente usando CSS3, de lo contrario, todavía es completamente opaco.

Es tan simple como:

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

Aquí 'es la muestra completa de la aplicación de navegador webkit más simple posible, con soporte de transparencia:

#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

En Safari 1.3 y 2, había un menú de depuración oculto (invocado a través de la Terminal: por defecto escribe com.apple.Safari IncludeDebugMenu 1 ) que incluía un & # 8220; Use Transparent Window & # 8221; opción.

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

Sin embargo, no estoy seguro si esto fue algo de WebKit o de Safari.

(En Safari 3, el menú de depuración parece haber sido reemplazado por el menú & # 8220; Desarrollar & # 8221; (habilitar en Preferencias > Avanzado) que no tiene la opción de ventana transparente).

Answer 3

Básicamente, desea configurar el espacio de color ARGB para enviarlo al administrador de ventanas. Obviamente, solo los administradores de ventanas que admiten la composición podrán aprovechar esto.

Es posible que desee hablar con los desarrolladores de screenlet y compiz para que puedan ayudar más.

Answer 4

Esta esencia funciona para mí, a partir de 2013, probada solo con ubuntu:

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

Answer 5

Tengo una nueva solución que es realmente fácil de hacer, para una sola captura de pantalla. Está usando node.js con la biblioteca phantom.js.

1. instalar node.js
2. ejecute 'npm install -g phantomjs' en la consola / terminal

3. guarde lo siguiente como script.js y ejecútelo desde la consola '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. beneficio? :) disfruta