Có thể hiển thị nội dung web trên nền rõ ràng bằng WebKit không?

Question

Tôi đang cố gắng đánh giá khả năng của một bản vá cho WebKit, điều này sẽ cho phép tất cả đồ họa được hiển thị trên nền hoàn toàn trong suốt.

Hiệu ứng mong muốn là hiển thị nội dung web mà không có bất kỳ nền nào, nó sẽ xuất hiện trôi nổi trên màn hình (hoặc bất kỳ thứ gì được hiển thị phía sau cửa sổ trình duyệt).

Có ai nhìn thấy ứng dụng thực hiện việc này không? (Tôi có thể nghĩ về một số trình giả lập thiết bị đầu cuối có thể.) Nếu ai đó đã làm việc bên trong WebKit (hoặc có thể là Gecko?) Bạn có nghĩ rằng nó có thể thực hiện được điều này không?

---

Cập nhật: Tôi đã nhận ra rằng Mac OSX widget bảng điều khiển sử dụng kỹ thuật này chính xác. Vì vậy, điều này phải có thể.

---

Cập nhật 2: tôi đã biên soạn WebKit trên linux và nhận thấy các tùy chọn cấu hình bao gồm:

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

tôi nhận được gần hơn. Có ai giúp được không?

---

Cập nhật 3: tôi tiếp tục tìm tài liệu tham khảo này trong bài viết trên danh sách gửi thư khác nhau có liên quan.

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

Answer 1

Giải Quyết!

Thông qua nghiên cứu đang diễn ra, các diễn đàn cọ rửa và kho mã nguồn, tôi đã ghép các bước cần thiết để thực hiện điều này bằng cách sử dụng chỉ libwebkit và máy tính để bàn compiz chuẩn (bất kỳ máy tính để bàn Xorg nào có tính năng tổng hợp).

Đối với một libwebkit hiện tại (1.1.10-SVN), có một 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 

Theo mã đi, phím được gọi webkit_web_view_set_transparent.

Và dĩ nhiên, hệ thống bạn đang chạy trên đó phải có thẻ đồ họa có khả năng (intel, radeon hoặc nvidia) và đang chạy trình quản lý cửa sổ tổng hợp (như Compiz).

Và cuối cùng, để thực sự thấy độ trong suốt, nội dung bạn đang xem phải đặt nền trong suốt bằng CSS3, nếu không nó vẫn hoàn toàn mờ đục.

Nó đơn giản như:

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

Dưới đây là toàn bộ mẫu cho ứng dụng trình duyệt webkit đơn giản nhất có thể, với sự hỗ trợ minh bạch:

#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

Về cơ bản bạn muốn được thiết lập không gian màu ARGB được gửi tới người quản lý cửa sổ. Rõ ràng chỉ những người quản lý cửa sổ có hỗ trợ tổng hợp mới có thể tận dụng điều này.

Bạn có thể muốn nói chuyện với các nhà phát triển screenlet và compiz, họ sẽ có thể trợ giúp thêm.

Answer 3

Quay lại Safari 1.3 và 2, đã có menu gỡ lỗi ẩn (được gọi qua Thiết bị đầu cuối: defaults write com.apple.Safari IncludeDebugMenu 1) bao gồm tùy chọn "Sử dụng Cửa sổ trong suốt".

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

Không chắc nếu điều này là một điều WebKit hoặc một điều Safari mặc dù.

(Trong Safari 3, debug đơn dường như đã được thay thế bằng “Phát triển” menu (cho phép trong Preferences> Advanced) mà không có tùy chọn cửa sổ trong suốt.)

Answer 4

ý chính này hoạt động cho tôi, tính đến năm 2013, chỉ được thử nghiệm với ubuntu:

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

Answer 5

Tôi có một giải pháp mới thực sự dễ thực hiện đối với một ảnh chụp màn hình. Nó đang sử dụng node.js với thư viện phantom.js.

1. cài đặt Node.js
2. chạy 'NPM cài đặt phantomjs -g' trong giao diện điều khiển/thiết bị đầu cuối

3. lưu sau khi script.js và chạy nó từ giao diện điều khiển '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. lợi nhuận? :) tận hưởng