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

StackOverflow https://stackoverflow.com/questions/60455

  •  09-06-2019
  •  | 
  •  

質問

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");

これで、サーバー側にスクリーンショットが表示されます。

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

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

バグの報告に関しても同様の要件がありました。イントラネットのシナリオであったため、ブラウザーのアドオン ( ファイアショット Firefoxの場合と IEのスクリーンショット Internet Explorer の場合）。

の スナップエンゲージ を使用します Javaアプレット (1.5+) ブラウザのスクリーンショットを作成します。私の知る限り、 java.awt.Robot ジョブを実行する必要があります。ユーザーはアプレットがそのジョブを実行することを (1 回) 許可するだけで済みます。

そして、それに関する投稿を見つけました。

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

自動に関しては、使用するツールに完全に依存します。API があれば、ユーザーに自分の操作を気づかれずに、Visual Basic を数回呼び出すだけでスクリーンショットと保存のプロセスをトリガーできると思います。

HTA について言及したため、Windows を使用していて、(おそらく) 環境 (例:OS とバージョン) 非常によくわかりました。

Javascript でスクリーンショットを取得するための優れたソリューションは、次のとおりです。 https://grabz.it.

これらには、あらゆるタイプの JS アプリケーションで使用できる、柔軟で使いやすいスクリーンショット API が備わっています。

試してみたい場合は、まず認証を取得してください アプリキー+シークレット そしてその 無料の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 を利用する必要があります。詳細については、詳細ガイドを確認してください ここ.

見つけた dom からイメージへ 良い仕事をしました（html2canvasよりもはるかに優れています）。次の質問と回答を参照してください。 https://stackoverflow.com/a/32776834/207981

この質問は、これをサーバーに送信することについて尋ねています。これは可能なはずですが、画像をダウンロードしたい場合は、それを結合する必要があります。 ファイルセーバー.js, 複数の画像ファイルを含む zip をダウンロードしたい場合は、すべてクライアント側で生成されます。 jszip.

サーバー側で実行したい場合は、次のようなオプションがあります。 ファントムJS, 、現在は非推奨になっています。最善の方法は、次のようなヘッドレス Chrome です。 人形遣い Node.JS 上で。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 サービスを使用したい場合は、次のような多くのオプションがあります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top