Можно ли визуализировать веб-контент на чистом фоне с помощью WebKit?
-
11-07-2019 - |
Вопрос
Я пытаюсь оценить возможность патча для WebKit, который позволил бы отображать всю визуализированную графику на полностью прозрачном фоне.
Желаемый эффект состоит в том, чтобы отображать веб-контент вообще без какого-либо фона, он должен казаться плавающим над рабочим столом (или чем-то еще, что отображается за окном браузера).
Кто-нибудь видел, чтобы приложение делало это?(Я могу вспомнить некоторые эмуляторы терминала, которые могут это сделать.) Если кто-нибудь работал внутри WebKit (или, возможно, Gecko?), как вы думаете, можно ли это сделать?
Обновлять: Я понял, что виджеты панели управления Mac OSX используют именно эту технику.Итак, это должно быть возможно.
Обновление 2: Я скомпилировал WebKit в Linux и заметил, что параметры настройки включают:
--enable-dashboard-support
enable Dashboard support default=yes
Я подхожу ближе.Кто-нибудь может помочь?
Обновление 3: Я продолжаю находить упоминания об этом в сообщениях в различных списках рассылки.
Решение
Решено!
Благодаря постоянным исследованиям, просмотру форумов и репозиториев исходного кода я собрал необходимые шаги для достижения этой цели, используя только libwebkit и стандартный рабочий стол Compiz (подойдет любой рабочий стол Xorg с композицией).
Для текущего libwebkit (1.1.10-SVN) существует 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
Что касается кода, ключ вызывает вызов 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;
}
Другие советы
Еще в 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 меню отладки, похоже, было заменено меню «Разработка» (включено в «Настройки» > «Дополнительно»), в котором нет опции прозрачного окна.)
По сути, вы хотите настроить цветовое пространство ARGB для отправки оконному менеджеру.Очевидно, что только оконные менеджеры, поддерживающие композицию, смогут воспользоваться этим.
Возможно, вы захотите поговорить с разработчиками screenlet и compiz, они смогут помочь вам больше.
Эта суть работает для меня по состоянию на 2013 год, проверено только с Ubuntu:
У меня есть новое решение, которое очень легко реализовать для одного скриншота.Он использует node.js с библиотекой phantom.js.
- установить node.js
- запустите «npm install -g phantomjs» в консоли/терминале
сохраните следующее как 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(); };
- выгода?:) наслаждаться