Можно ли отображать веб-контент на прозрачном фоне с помощью WebKit?

Question

Я пытаюсь оценить возможность патча на WebKit, который позволит отображать всю визуализированную графику на полностью прозрачный фон.

Желаемый эффект заключается в том, чтобы визуализировать веб-контент без какого-либо фона, он должен появиться на рабочем столе (или что-то, что отображается за окном браузера).

Кто-нибудь видел приложение? (Я могу думать о некоторых эмуляторах терминала, которые могут это сделать.) Если кто-то работал внутри WebKit (или, возможно, Gecko?), Вы думаете, что это можно было бы сделать?

---

Update: Я пришел к выводу, что Mac OSX приборная панель виджетов использовать именно этот метод. Таким образом, это должно быть возможно.

---

Update 2: Я составил WebKit на Linux и заметил, что параметры настраивают включают:

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

Я становлюсь ближе. Может ли кто-нибудь помочь?

---

Update 3: Я по-прежнему найти ссылки на это в сообщениях на различных соответствующих списков рассылки.

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

Answer 1

Решено!

С помощью постоянных исследований, чистящих форумы и репозитории исходного кода, я собрал необходимые шаги для этого, используя только libwebkit и стандартный рабочий стол compiz (любой рабочий стол Xorg с компоновкой должен делать).

Для текущего libwebkit (1.1.10-СВН), существует 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 

Насколько код идет, ключ звонит webkit_web_view_set_transparent.

И, конечно, система, в которой вы работаете, должна иметь совместимую графическую карту (intel, radeon или nvidia) и запускать диспетчер окон компоновки (например, Compiz).

И наконец, чтобы увидеть прозрачность, контент, который вы просматриваете, должен установить прозрачный фон с помощью CSS3, в противном случае он все еще полностью непрозрачен.

Это так просто, как:

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

Вот это полный образец для самого простого приложения WebKit браузера с поддержкой прозрачности:

#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; 
} 

Screenshot! http://i27.tinypic.com/2qntlxl.jpg

Answer 2

В основном вы хотите, чтобы настройки цветового пространства ARGB быть отправки оконного менеджера. Очевидно, что только оконные менеджеры, поддерживающие компоновку, смогут воспользоваться этим.

Возможно, вам захочется поговорить с разработчиками сценариев и компиляторов, чтобы они могли больше помочь.

Answer 3

В Safari 1.3 и 2 было скрытое меню отладки (вызываемое через терминал: defaults write com.apple.Safari IncludeDebugMenu 1), которое включало опцию «Использовать прозрачное окно».

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

Не уверен, если это была WebKit вещь или Safari вещь, хотя.

(В Safari 3, меню отладки, кажется, было заменено меню «Develop» (включить в меню Настройки> Дополнительно), который не имеет опции прозрачного окна.)

Answer 4

Эта сущность работает на я, начиная с 2013 года, проверял только на ubuntu:

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

Answer 5

У меня есть новое решение, которое действительно легко сделать для одного снимка экрана. Он использует node.js с библиотекой phantom.js.

1. установить Node.js
2. перспективе 'NPM установить -g phantomjs' в консоли/терминале

3. сохранить следующий как script.js и запустить его из консоли '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. прибыль? :) нравится