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

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

32 голосов
/ 28 ноября 2008

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

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

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

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

Обновление 2: Я скомпилировал WebKit для Linux и заметил, что параметры конфигурации включают в себя: 

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

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

Обновление 3: Я продолжаю находить ссылки на это в сообщениях в различных связанных списках рассылки.

Ответы [ 5 ]

26 голосов
/ 15 июля 2009

Решено!

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

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

2 голосов
/ 09 мая 2009

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

Не уверен, что это был WebKit или Safari.

(В Safari 3 меню отладки, по-видимому, было заменено меню «Разработка» (включить в «Предпочтения»> «Дополнительно»), в котором нет опции прозрачного окна.)

1 голос
/ 29 марта 2016

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

  1. установить node.js
  2. запустите 'npm install -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. прибыль? :) наслаждайся
1 голос
/ 03 декабря 2013

Этот гистограмма у меня работает, по состоянию на 2013 год тестировалась только с Ubuntu:

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

1 голос
/ 26 апреля 2009

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

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

...