JavaScriptを使用してWebページのスクリーンショットを撮りますか？

JavaScriptを使用してWebページのスクリーンショットを撮り、それをサーバーに送信することはできますか？

私はブラウザのセキュリティ問題にはそれほど関心がありません。実装はHTAの場合と同様です。しかし、それは可能でしょうか？

私は、ActiveXコントロールを使用して、HTAに対してこれを行いました。VB6でコントロールを作成してスクリーンショットを撮るのは非常に簡単でした。SendKeysはPrintScreenを実行できないため、keybd_event API呼び出しを使用する必要がありました。そのためのコードは次のとおりです。

Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)

Public Const CaptWindow = 2

Public Sub ScreenGrab()
   keybd_event &H12, 0, 0, 0
   keybd_event &H2C, CaptWindow, 0, 0
   keybd_event &H2C, CaptWindow, &H2, 0
   keybd_event &H12, 0, &H2, 0
End Sub

これは、ウィンドウをクリップボードに移動するだけです。

別のオプションとして、スクリーンショットが必要なウィンドウがHTAである場合は、XMLHTTPRequestを使用してDOMノードをサーバーに送信し、スクリーンショットをサーバー側で作成します。

GoogleはこれをGoogle+で行っており、有能な開発者がリバースエンジニアリングしてhttp://html2canvas.hertzen.com/を作成しています。IEで作業するには、http：//excanvas.sourceforge.net/などのキャンバスサポートライブラリが必要です。

私が発見した別の可能な解決策は、http： //www.phantomjs.org/です。これにより、ページのスクリーンショットなどを簡単に取得できます。この質問に対する元の要件はもう有効ではありませんが（別の仕事）、PhantomJSを将来のプロジェクトに統合する可能性があります。

パウンダーは、これをボディ要素全体をキャンバスに設定してcanvas2imageを使用することで可能かどうかを示しています。

http://www.nihilogic.dk/labs/canvas2image/

これを行うための可能な方法は、Windowsで実行していて、.NETがインストールされている場合は、次のことができます。

public Bitmap GenerateScreenshot(string url)
{
    // This method gets a screenshot of the webpage
    // rendered at its full size (height and width)
    return GenerateScreenshot(url, -1, -1);
}

public Bitmap GenerateScreenshot(string url, int width, int height)
{
    // Load the webpage into a WebBrowser control
    WebBrowser wb = new WebBrowser();
    wb.ScrollBarsEnabled = false;
    wb.ScriptErrorsSuppressed = true;
    wb.Navigate(url);
    while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }


    // Set the size of the WebBrowser control
    wb.Width = width;
    wb.Height = height;

    if (width == -1)
    {
        // Take Screenshot of the web pages full width
        wb.Width = wb.Document.Body.ScrollRectangle.Width;
    }

    if (height == -1)
    {
        // Take Screenshot of the web pages full height
        wb.Height = wb.Document.Body.ScrollRectangle.Height;
    }

    // Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
    Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
    wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
    wb.Dispose();

    return bitmap;
}

そして、PHPを介して次のことができます。

exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");

次に、サーバー側にスクリーンショットがあります。

これはあなたにとって理想的な解決策ではないかもしれませんが、言及する価値があるかもしれません。

Snapsieは、Internet Explorerのスクリーンショットをキャプチャして保存できるようにするオープンソースのActiveXオブジェクトです。DLLファイルがクライアントに登録されると、スクリーンショットをキャプチャし、JavaScriptを使用してサーバーにファイルをアップロードできるようになります。欠点：クライアントでDLLファイルを登録する必要があり、Internet Explorerでのみ機能します。

バグを報告するための同様の要件がありました。これはイントラネットシナリオ用であるため、ブラウザーのアドオン（FirefoxのFireshotやInternet ExplorerのIEスクリーンショットなど）を使用できました。

SnapEngageは、使用するJavaアプレットブラウザのスクリーンショットを作成する（1.5以降）を。私の知る限り、java.awt.Robot仕事をする必要があります-ユーザーはアプレットにそれを行うことを許可するだけです（一度だけ）。

そして私はそれについての投稿を見つけました：

• ActiveXを使用せずにWebサイトのスクリーンショットを撮るためのJavaScriptコードのスタックオーバーフロー質問
• ブログ投稿SnapABugのしくみ–何をすべきか

これは、HTAとVBScriptを使用して実現できます。スクリーンショットを作成するには、外部ツールを呼び出すだけです。名前を忘れてしまいましたが、Windows Vistaにはスクリーンショットを撮るツールがあります。追加のインストールは必要ありません。

自動として-それは完全にあなたが使用するツールに依存します。APIがある場合は、ユーザーが何をしたかをユーザーが知らなくても、Visual Basicの2回の呼び出しでスクリーンショットと保存プロセスをトリガーできます。

HTAについてお話ししたので、私はあなたがWindowsを使用していて、（おそらく）環境（OSやバージョンなど）をよく知っていると想定しています。

私はdom-to-imageがうまく機能していることを発見しました（html2canvasよりはるかに優れています）。次の質問と回答を参照してください：https : //stackoverflow.com/a/32776834/207981

この質問では、これをサーバーに送信することについて質問されますが、可能であれば、画像をダウンロードする場合は、FileSaver.jsと組み合わせて、zipをダウンロードする必要があります。すべてのクライアント側で生成された複数の画像ファイルがjszipを調べます。

JavaScriptを取り込むスクリーンショットの優れたソリューションは、https：//grabz.itによるものです。

柔軟で使いやすいスクリーンショットAPIがあり、あらゆるタイプのJSアプリケーションで使用できます。

試してみたい場合は、最初に認証アプリのキー+シークレットと無料のSDKを取得する必要があります

次に、アプリでの実装手順は次のようになります。

// include the grabzit.min.js library in the web page you want the capture to appear
<script src="grabzit.min.js"></script>

//use the key and the secret to login, capture the url
<script>
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com").Create();
</script>

スクリーンショットは、さまざまなパラメーターでカスタマイズできます。例えば：

GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

それで全部です。その後、しばらく待つだけで、ページを再読み込みする必要なく、画像がページの下部に自動的に表示されます。

スクリーンショットのメカニズムには他にも機能があります。ここで確認できます。

スクリーンショットをローカルに保存することもできます。そのためには、GrabzItサーバー側APIを利用する必要があります。詳細については、こちらの詳細ガイドをご覧ください。

サーバー側で実行する場合は、廃止予定のPhantomJSなどのオプションがあります。最善の方法は、Node.JSのPuppeteerなどのヘッドレスクロームです。Puppeteerを使用してWebページをキャプチャするのは次のように簡単です。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

ただし、サーバーで実行するにはヘッドレスクロムが必要です。これには依存関係があり、制限された環境には適さない場合があります。（また、Node.JSを使用していない場合は、ブラウザーのインストール/起動を自分で処理する必要がある場合があります。）

SaaSサービスを使用する場合は、次のような多くのオプションがあります。

• レストパック
• UrlBox
• スクリーンショットレイヤー

この質問は古いですが、おそらく最先端の答えに興味がある人がまだいるでしょう：

使用できますgetDisplayMedia：

https://github.com/ondras/browsershot

本日現在2020年4月GitHubライブラリhtml2Canvas https://github.com/niklasvh/html2canvas

GitHub 20Kスター | Azure pipeles：成功しました| ダウンロード1.3M / mo |

quote： " JavaScript HTMLレンダラースクリプトを使用すると、Webページまたはその一部の"スクリーンショット "をユーザーのブラウザーで直接取得できます。スクリーンショットはDOMに基づいているため、実際の表現に対して100％正確ではない場合があります。実際のスクリーンショットは作成しませんが、ページで利用可能な情報に基づいてスクリーンショットを作成します。

rasterizeHTMLを使用してsvgやページの内容を含む画像を作成する簡単な関数を作成しました。

見てみな ：

https://github.com/orisha/tdg-screen-shooter-pure-js