HTMLviewer2_API

Paused

App Files Files Community

tomo2chin2 commited on Mar 24, 2025

Commit

e170610

verified ·

1 Parent(s): ee6f0ce

Update app.py

Browse files

Files changed (1) hide show

app.py +55 -68

app.py CHANGED Viewed

@@ -10,98 +10,82 @@ import tempfile
 import time
 import os
-def get_full_dimensions(driver):
-    """
-    <body>と<html>の scrollWidth/scrollHeight を比較して
-    ページ全体の幅・高さを返す
-    """
-    body_w = driver.execute_script("return document.body.scrollWidth")
-    body_h = driver.execute_script("return document.body.scrollHeight")
-    html_w = driver.execute_script("return document.documentElement.scrollWidth")
-    html_h = driver.execute_script("return document.documentElement.scrollHeight")
-    full_width = max(body_w, html_w)
-    full_height = max(body_h, html_h)
-    return full_width, full_height
-def scroll_to_bottom(driver):
     """
-    一旦ページの最下部までスクロールし、
-    Lazy Loadなどで追加要素が生成されるのを待つ
     """
-    last_height = driver.execute_script("return document.body.scrollHeight")
-    while True:
-        driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
-        time.sleep(1)  # スクロール後の描画待ち
-        new_height = driver.execute_script("return document.body.scrollHeight")
-        if new_height == last_height:
-            break
-        last_height = new_height
-def render_fullpage_screenshot(html_code):
-    # HTMLを一時ファイルに保存
     tmp_file = tempfile.NamedTemporaryFile(suffix=".html", delete=False)
     tmp_path = tmp_file.name
     tmp_file.write(html_code.encode('utf-8'))
     tmp_file.close()
-    # ヘッドレスChrome起動オプション
     options = Options()
-    options.add_argument("--headless")
-    options.add_argument("--no-sandbox")
-    options.add_argument("--disable-dev-shm-usage")
-    options.add_argument("--force-device-scale-factor=1")
     try:
         driver = webdriver.Chrome(options=options)
-        # 1) とりあえず適当なウィンドウサイズで開く
         driver.set_window_size(1200, 800)
         driver.get("file://" + tmp_path)
-        # ページロード完了待ち
         WebDriverWait(driver, 10).until(
             EC.presence_of_element_located((By.TAG_NAME, "body"))
         )
         time.sleep(1)
-        # ---- (A) 一度ページ全体のサイズを取得してウィンドウを拡張 ----
-        w1, h1 = get_full_dimensions(driver)
-        driver.set_window_size(w1, h1)
-        time.sleep(1)
-        # ---- (B) ページ下端までスクロールしてLazy Load等を発火させる ----
-        scroll_to_bottom(driver)
-        time.sleep(1)
-        # 再度サイズを取得して変化があれば再設定
-        w2, h2 = get_full_dimensions(driver)
-        if (w2 != w1) or (h2 != h1):
-            driver.set_window_size(w2, h2)
-            time.sleep(1)
-            # 念のためもう一度最下部へ
-            scroll_to_bottom(driver)
-            time.sleep(1)
-        # ---- (C) スクロールバーを非表示にする（不要ならコメントアウト）----
-        driver.execute_script("""
-            document.documentElement.style.overflow = 'hidden';
-            document.body.style.overflow = 'hidden';
-        """)
-        time.sleep(1)
-        # overflow: hidden による再レイアウトでサイズが変わる可能性がある
-        w3, h3 = get_full_dimensions(driver)
-        driver.set_window_size(w3, h3)
-        time.sleep(1)
-        # ---- (D) ★最終的にトップへ戻す★ ----
-        driver.execute_script("window.scrollTo(0, 0);")
-        time.sleep(1)
-        # ---- (E) スクリーンショット取得 ----
-        png = driver.get_screenshot_as_png()
     except Exception as e:
-        # エラー時は1x1の黒画像を返す
         return Image.new('RGB', (1, 1), color=(0, 0, 0))
     finally:
@@ -109,15 +93,18 @@ def render_fullpage_screenshot(html_code):
         if os.path.exists(tmp_path):
             os.remove(tmp_path)
-    return Image.open(BytesIO(png))
 # Gradioインターフェース
 iface = gr.Interface(
     fn=render_fullpage_screenshot,
     inputs=gr.Textbox(lines=15, label="HTMLコード入力"),
-    outputs=gr.Image(type="pil", label="ページ全体のスクリーンショット"),
-    title="Full Page Screenshot App",
-    description="HTMLをヘッドレスブラウザでレンダリングし、ページ全体を1枚の画像として取得します。"
 )
 if __name__ == "__main__":

 import time
 import os
+def render_fullpage_screenshot(html_code):
     """
+    ページを少しずつスクロールしながら複数回のスクリーンショットを撮影し、
+    それらを縦方向に結合して1枚の長い画像にする。
     """
+    # 1) HTMLコードを一時ファイルに保存
     tmp_file = tempfile.NamedTemporaryFile(suffix=".html", delete=False)
     tmp_path = tmp_file.name
     tmp_file.write(html_code.encode('utf-8'))
     tmp_file.close()
+    # 2) ヘッドレスChrome(Chromium)起動オプション設定
     options = Options()
+    options.add_argument("--headless")               # ヘッドレスモード
+    options.add_argument("--no-sandbox")             # コンテナ環境でのサンドボックス無効化
+    options.add_argument("--disable-dev-shm-usage")  # /dev/shmを使わない
+    options.add_argument("--force-device-scale-factor=1")  # DPI/スケール固定
     try:
         driver = webdriver.Chrome(options=options)
+        # 適当な初期ウィンドウサイズに設定してページを読み込む
         driver.set_window_size(1200, 800)
         driver.get("file://" + tmp_path)
+        # 3) ページロード完了を待機
         WebDriverWait(driver, 10).until(
             EC.presence_of_element_located((By.TAG_NAME, "body"))
         )
+        # さらにフォントや外部リソースを読み込み終わるまで少し待つ
+        time.sleep(2)
+        # ---- スクロールバーを非表示にしたい場合 ----
+        # （ただし一部ページでレイアウトが変化する可能性があるので要注意）
+        driver.execute_script(
+            "document.documentElement.style.overflow = 'hidden';"
+            "document.body.style.overflow = 'hidden';"
+        )
         time.sleep(1)
+        # 4) 画面のビューポート高・ページ全体の高さを取得
+        viewport_height = driver.execute_script("return window.innerHeight")
+        scroll_height = driver.execute_script("return document.body.scrollHeight")
+        # スクロール＋キャプチャを繰り返す
+        images = []
+        current_position = 0
+        while True:
+            # 現在の画面をスクリーンショット
+            png = driver.get_screenshot_as_png()
+            img = Image.open(BytesIO(png))
+            images.append(img)
+            # もし次のスクロールでページ末尾を超えるなら、ループを抜ける
+            if current_position + viewport_height >= scroll_height:
+                break
+            # 次のスクロール位置へ移動
+            current_position += viewport_height
+            driver.execute_script(f"window.scrollTo(0, {current_position})")
+            # スクロール後の描画待ち
+            time.sleep(1)
+        # 5) 取得した複数画像を縦方向に結合
+        total_width = max(img.width for img in images)
+        total_height = sum(img.height for img in images)
+        full_screenshot = Image.new('RGB', (total_width, total_height))
+        current_y = 0
+        for img in images:
+            full_screenshot.paste(img, (0, current_y))
+            current_y += img.height
     except Exception as e:
+        # 何らかのエラーが発生した場合、1x1の黒画像を返す
         return Image.new('RGB', (1, 1), color=(0, 0, 0))
     finally:
         if os.path.exists(tmp_path):
             os.remove(tmp_path)
+    return full_screenshot
 # Gradioインターフェース
 iface = gr.Interface(
     fn=render_fullpage_screenshot,
     inputs=gr.Textbox(lines=15, label="HTMLコード入力"),
+    outputs=gr.Image(type="pil", label="フルページスクリーンショット"),
+    title="Full Page Screenshot with Scrolling",
+    description=(
+        "ページを少しずつスクロールしながら複数回キャプチャを撮影し、"
+        "最終的に縦に結合して1枚の長い画像を生成します。"
+    )
 )
 if __name__ == "__main__":