WebKit을 사용하여 웹 컨텐츠를 명확한 배경으로 렌더링 할 수 있습니까?

https://stackoverflow.com/questions/324923

11-07-2019
|

문제

나는 렌더링 된 모든 그래픽을 완전히 투명한 배경으로 렌더링 할 수있는 WebKit에 대한 패치의 가능성을 측정하려고 노력하고 있습니다.

원하는 효과는 배경없이 웹 컨텐츠를 전혀 렌더링하는 것입니다. 데스크탑 위에 떠있는 것처럼 보일 것입니다 (또는 브라우저 창 뒤에 표시되는 내용).

앱을 본 사람이 있습니까? (내가 할 수있는 일부 터미널 에뮬레이터를 생각할 수 있습니다.) 누군가 Webkit (또는 아마도 도마뱀) 내부에서 일한 사람이라면이 작업을 수행 할 수 있다고 생각하십니까?

업데이트: Mac OSX 대시 보드 위젯 이이 정확한 기술을 사용한다는 것을 깨달았습니다. 따라서 이것은 가능해야합니다.

Update 2: Linux에서 WebKit을 컴파일했는데 구성 옵션에는 다음이 포함되어 있음을 알았습니다.

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

나는 가까워지고있다. 누구든지 도울 수 있습니까?

3 : 업데이트 3. 다양한 관련 메일 링리스트의 게시물에서 이에 대한 참조를 계속 찾습니다.

해결책

해결되었다!

진행중인 연구, 수색 포럼 및 소스 코드 리포지토리를 통해 Libwebkit 및 표준 Compiz Desktop (Compositing이있는 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)가 있어야하며 Compozing Window Manager (예 : 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;
}

다른 팁

사파리 1.3과 2로 돌아와서 숨겨진 디버그 메뉴가있었습니다 (터미널을 통해 호출 : defaults write com.apple.Safari IncludeDebugMenu 1) "투명한 창 사용"옵션이 포함되어 있습니다.

이것이 WebKit 또는 Safari인지 확실하지 않습니다.

(Safari 3에서는 디버그 메뉴가 투명한 창 옵션이없는“선호도> 고급)로 대체 된 것 같습니다.)

기본적으로 ArgB 색상 공간을 설정하여 Window Manager로 보내려고합니다. 분명히 컴포지트를 지원하는 창 관리자만이이를 활용할 수 있습니다.

스크린 렛과 대화하고 개발자가 더 많은 도움을 줄 수 있어야 할 수도 있습니다.

이 요점은 2013 년 현재 Ubuntu에서만 테스트되었습니다.

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

단일 스크린 샷을 위해 정말 쉬운 새로운 솔루션이 있습니다. Phantom.js 라이브러리와 함께 Node.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