É possível processar o conteúdo web sobre um fundo claro usando WebKit?

Question

Eu estou tentando avaliar a possibilidade de um patch para WebKit que permitiria que todos os gráficos prestados a ser processado em um fundo totalmente transparente.

O efeito desejado é tornar o conteúdo web sem qualquer fundo em tudo, ele deve aparecer a flutuar sobre a área de trabalho (ou o que é exibida atrás da janela do navegador).

Alguém viu um app fazer isso? (Eu posso pensar de alguns emuladores de terminais que pode.) Se alguém tem trabalhado dentro do WebKit (ou possivelmente Gecko?) Você acha que seria possível fazer isso?

---

Update: Eu vim a perceber que Mac OSX widgets do Dashboard usar esta técnica exata. Então, isso deve ser possível.

---

Update 2: eu compilei WebKit no linux e notou as opções do configure incluem:

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

Eu estou chegando mais perto. Alguém pode ajudar?

---

Update 3:. I continuar a encontrar referências a isso em posts em várias listas de discussão relacionadas

• https://lists.webkit.org/pipermail/ webkit-dev / 2008-setembro / 005019.html
• https://lists.webkit.org/pipermail/ webkit-dev / 2009 a junho / 008182.html

Answer 1

resolvido!

Através de investigação em curso, vasculhando fóruns e repositórios de código-fonte, eu peiced juntos os passos necessários para alcançar este objetivo utilizando apenas libwebkit e um desktop compiz padrão (qualquer desktop Xorg com composição deve fazer).

Para uma libwebkit atual (1.1.10-SVN), há um 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

Quanto ao código vai, a chave é chamar webkit_web_view_set_transparent.

E, claro, o sistema que você está executando-o em deve ter um cartão capaz de gráficos (intel, radeon, ou nvidia) e estar executando um gerenciador de janelas de composição (como o Compiz).

E, finalmente, para ver realmente a transparência, o conteúdo que você está vendo deve definir um fundo transparente usando CSS3, caso contrário ainda é completamente opaco.

É tão simples como:

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

Aqui é a amostra total para o mais simples aplicativo navegador webkit possível, com o apoio da transparência:

#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

De volta ao Safari 1.3 e 2, houve um menu de depuração oculta (invocada através do Terminal: defaults write com.apple.Safari IncludeDebugMenu 1). Que incluiu um “Use Transparente Janela” opção

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

Não sei se isso era uma coisa WebKit ou uma coisa Safari embora.

(No Safari 3, o menu de depuração parece ter sido substituída pela “Desenvolver” menu (habilitar em Preferências> Avançado) que não tem a opção de janela transparente.)

Answer 3

Basicamente, você quer ser a criação do espaço de cor ARGB a ser o envio para o gerenciador de janelas. Obviamente apenas gerenciadores de janelas que o apoio de composição será capaz de tirar partido desta.

Você pode querer falar com os desenvolvedores screenlet e Compiz eles devem ser capazes de ajudar mais.

Answer 4

Esta essência funciona para mim, a partir de 2013, testado apenas com o Ubuntu:

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

Answer 5

Eu tenho uma nova solução que é realmente fácil de fazer, para uma única imagem. É usando node.js com biblioteca phantom.js.

1. instalar node.js
2. executar 'npm instalar PhantomJS -g' no console / terminal de

3. Salve o seguinte como script.js e executá-lo a partir do 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. lucro? :) desfrutar