代码之家  ›  专栏  ›  技术社区  ›  itsadok

是否可以使用WebKit在清晰的背景上呈现web内容?

  •  32
  • itsadok  · 技术社区  · 17 年前

    我正在尝试评估WebKit补丁的可能性,它允许所有渲染的图形都渲染到完全透明的背景上。

    理想的效果是在没有任何背景的情况下呈现web内容,它应该显示为漂浮在桌面上(或显示在浏览器窗口后面的任何内容)。


    更新:


    更新2: 我在linux上编译了WebKit,并注意到配置选项包括:

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

    我越来越近了。有人能帮忙吗?


    我继续在各种相关邮件列表的帖子中找到这方面的参考资料。

    5 回复  |  直到 15 年前
        1
  •  29
  •   Glorfindel Doug L.    7 年前

    解决了的!

    通过不断的研究、搜索论坛和源代码存储库,我只使用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 .

    最后,要真正看到透明度,您正在查看的内容必须使用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
  •  2
  •   Paul D. Waite    17 年前

    defaults write com.apple.Safari IncludeDebugMenu 1 )其中包括使用透明窗口选项。

    不确定这是WebKit还是Safari。

        3
  •  1
  •   ewanm89    17 年前

        4
  •  1
  •   Pouria    12 年前

    从2013年起,这一要点适用于我,仅在ubuntu上进行了测试:

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

        5
  •  1
  •   Eskel    10 年前

    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();
      };
      
    推荐文章