WebKitを使用して、明確な背景の上にWebコンテンツをレンダリングすることは可能ですか？

https://stackoverflow.com/questions/324923

11-07-2019
|

質問

すべてのレンダリングされたグラフィックスを完全に透明な背景にレンダリングできるWebKitへのパッチの可能性を評価しようとしています。

望ましい効果は、背景なしでWebコンテンツをレンダリングすることです。デスクトップ（またはブラウザウィンドウの背後に表示されるもの）に浮かぶように見えるはずです。

これを行うアプリを見た人はいますか？（できる端末エミュレーターを思い浮かべることができます。）もし誰かがWebKit（あるいはGeckoの内部）で働いたことがあるなら、これを行うことは可能だと思いますか？

更新： Mac OSXダッシュボードウィジェットがこの正確な手法を使用していることに気付きました。そのため、これが可能でなければなりません。

アップデート2： LinuxでWebKitをコンパイルしましたが、構成オプションに次のようなものがあることに気付きました：

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

近づいています。誰でも助けることができますか？

更新3：関連するさまざまなメーリングリストの投稿で、これへの参照を引き続き見つけます。

解決

解決済み

進行中の調査、精査フォーラム、およびソースコードリポジトリを通じて、libwebkitと標準のcompizデスクトップのみを使用してこれを達成するために必要な手順をまとめました。

現在の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;
}

他のヒント

Safari 1.3および2に戻ると、「Use Transparent Window」オプションを含む非表示のデバッグメニューがありました（ターミナルから起動： defaults write com.apple.Safari IncludeDebugMenu 1 ）。

これがWebKitのものかSafariのものかはわかりません。

（Safari 3では、デバッグメニューは、透明ウィンドウオプションを持たない「開発」メニュー（環境設定＆gt;詳細設定で有効）に置き換えられたようです。）

基本的に、ARGBカラースペースをウィンドウマネージャーに送信するように設定します。明らかに、合成をサポートするウィンドウマネージャーのみがこれを利用できます。

スクリーンレットと話し合い、開発者がもっと助けてくれるはずの開発者に話しかけたいかもしれません。

この要点は、2013年現在、ubuntuでのみテストされています：

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

1つのスクリーンショットに対して、本当に簡単に実行できる新しいソリューションがあります。 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();
};

利益？ :)お楽しみください

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow