149

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

私はブラウザのセキュリティの問題についてはあまり気にしていません。など、実装はHTA用です。しかし、それは可能ですか？

4

15 に答える 15

142

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

于 2011-08-02T22:53:13.273 に答える
43

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 ノードをサーバーに送信し、サーバー側でスクリーンショットを作成します。

于 2008-09-15T14:40:44.407 に答える
14

私が発見した別の可能な解決策はhttp://www.phantomjs.org/で、ページのスクリーンショットなどを非常に簡単に撮ることができます。この質問に対する私の最初の要件はもはや有効ではありませんが (別の仕事)、PhantomJS を将来のプロジェクトに統合する可能性があります。

于 2012-02-13T23:25:29.310 に答える
12

これが可能な場合は、ボディ要素全体をキャンバスに設定してから canvas2image を使用しますか?

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

于 2010-10-25T08:29:36.733 に答える
9

これを行うには、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");

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

于 2010-12-02T21:47:16.570 に答える
7

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

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

于 2008-09-15T14:58:00.480 に答える
6

バグの報告についても同様の要件がありました。これはイントラネット シナリオ用だったので、ブラウザー アドオン ( FirefoxのFireshotや Internet Explorer のIE Screenshotなど) を使用することができました。

于 2008-09-13T15:28:00.533 に答える
3

SnapEngageは、Java アプレット(1.5+) を使用してブラウザのスクリーンショットを作成します。私の知る限り、仕事をする必要があります-ユーザーはアプレットにそれを許可するだけです（1回）。java.awt.Robot

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

于 2010-10-14T19:01:23.217 に答える
1

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

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

HTA について言及されたので、Windows を使用していて、(おそらく) 環境 (OS やバージョンなど) をよく知っていると思います。

于 2008-09-13T10:52:47.263 に答える
0

私は、rasterizeHTML を使用してページ コンテンツを含む svg および/または画像を作成する単純な関数を作成しました。

見てみな ：

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

于 2020-06-17T16:17:07.297 に答える
0

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 を利用する必要があります。詳細については、こちらの詳細なガイドを確認してください。

于 2017-07-01T10:30:10.880 に答える