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

webkit moz

Question

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

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

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

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

Actualización 2: he compilado WebKit en Linux y he notado 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-September/005019.html
• https://lists.webkit.org/pipermail/webkit-dev/2009-June/008182.html

Answer 1

Resuelto

A través de investigaciones en curso, foros de búsqueda y repositorios de códigos fuente, estudié juntos los pasos necesarios para lograr esto utilizando solo libwebkit y un escritorio compiz estándar (cualquier computadora de escritorio Xorg con composición debería hacerlo).

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 ejecuta debe tener una tarjeta gráfica capaz (intel, radeon o nvidia) y ejecutar 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 con CSS3, de lo contrario, sigue siendo completamente opaco.

Es tan simple como:

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

Aquí está la muestra completa de la aplicación de navegador webkit más simple, 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://.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;
}

¡Captura de pantalla! http://i27.tinypic.com/2qntlxl.jpg

Answer 2

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

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

Answer 3

De vuelta en Safari 1.3 y 2, había un menú de depuración oculto (invocado a través de la Terminal: defaults write com.apple.Safari IncludeDebugMenu 1 ) que incluía la opción "Usar ventana transparente".

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

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ú "Desarrollar" (habilitar en Preferencias> Avanzado) que no tiene la opción de ventana transparente).

Answer 4

Esta idea funciona para mí, a partir de 2013, probado 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á utilizando node.js con la biblioteca phantom.js.

1. instalar node.js
2. ejecutar ''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. ¿lucro? :) disfruta