web-dev-qa-db-ja.com

JavaScript（またはその他）を介してブラウザのスクリーンショットを撮る

サポート上の理由から、ユーザーが現在のブラウザーウィンドウのスクリーンショットをできるだけ簡単に取り、サーバーに送信できるようにしたいと考えています。

（クレイジーな）アイデアはありますか？

javascriptbrowserscreenshot
25
Thorben Croisé

これが可能であれば、JavaScriptにはかなり大きなセキュリティホールのように見えます。悪意のあるユーザーがXSS攻撃でそのコードをサイトにインストールし、毎日のすべての作業のスクリーンショットを撮ったとします。あなたのオンラインバンキングで起こっていることを想像してください...

ただし、JavaScriptの外部でこのようなことを行うことは可能です。私は、Swingアプリケーションを開発しました このような画面キャプチャコードを使用 これは、ユーザーがRuntimeExceptionに遭遇するたびに、スクリーンショットを添付してメールをヘルプデスクに送信するという素晴らしい仕事をしました。

隅にぶら下がっている署名付きのJava=アプレット（shock！horror！noooooo！）を試すことができると思います。インストール時に指定された適切なセキュリティ権限で実行すると、強制的に実行される可能性があります。そのようなスクリーンショットのコード。

便宜上、私がリンクしたサイトのコードは次のとおりです。

import Java.awt.Dimension;
import Java.awt.Rectangle;
import Java.awt.Robot;
import Java.awt.Toolkit;
import Java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import Java.io.File;

...

public void captureScreen(String fileName) throws Exception {

   Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
   Rectangle screenRectangle = new Rectangle(screenSize);
   Robot robot = new Robot();
   BufferedImage image = robot.createScreenCapture(screenRectangle);
   ImageIO.write(image, "png", new File(fileName));
}
...
7
Gary Rowe

これの比較的成功した実装については、ここで共有されている回答を参照してください： https://stackoverflow.com/a/6678156/29164

利用： https://github.com/niklasvh/html2canvas

5
whoughton

Webページはこれを行うことはできません（または、可能であれば、どのブラウザーでも可能であれば非常に驚きます）が、Firefox拡張機能を使用するとできます。 https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas -を参照してください。そのページに「Chromeの権限」と表示されている場合は、拡張機能では実行できますが、ウェブページでは実行できません。

3
MatrixFrog

私はこれを2つのアプローチで行うのを見てきました。

  1. スクリーンショットをとるために別のサーバーをセットアップし、その上で多数のfirefoxインスタンスを実行します。Rubyで実行している場合は、次の2つのgemを確認してください：Selenium-webdriverおよびheadless

  2. http://url2png.com （簡単な方法）のようなホストされたソリューションを使用します

3
Brian Armstrong

キャンバスでページ全体をレンダリングして、この画像をサーバーに保存してみることができます。楽しんで ：）

3
Andreas Köberle

サポートには（少なくとも）2つの質問に対する答えが必要だと思います。

  1. 画面はどのように見えますか？そして
  2. なぜそのように見えるのですか？

スクリーンショット（ビジュアル）は非常に必要であり、最初の質問に答えますが、2番目の質問には答えられません。

最初の試みとして、ページ全体をサポートに送るようにしたいと思います。サポート技術者はそのページをブラウザに表示することができます（最初の質問に答えます）。また、顧客のHTMLの現在の状態を確認することもできます（2番目の質問への回答に役立ちます）。

AJAXまたはフォームのペイロードとして、クライアントJSが利用できる限り多くのページを送信しようとします。ページ上にない情報も送信します。 CookieやセッションIDなど、ページの状態に影響を与えるもの。

顧客には、プロセスを開始するための送信のようなボタンがある場合があります。

それでうまくいくと思います。見てみましょう：サーバー上のどこかに、着信ユーザーページをキャッチしてサポートに使用できるようにするためのCGIが必要です（おそらくディスクファイルを書き込むことによって）。その後、サポート担当者は同じページをロードできます（または自動的にロードしました）。他のすべての情報（Cookieなど）は、サポートが表示するページに配置できます。

さらに、送信ボタンのonclick（）を処理するクライアントJSには、有用なJS変数値を含めることもできます。

ねえ、これはうまくいく！私はうんざりしています:-)

HTH

-ピート

3
Pete Wilson

Fireshotプラグインを使用してこれを行うこともできます。次のコード（APIコードから抽出したため、API JSを含める必要がない）を使用して、Fireshotオブジェクトを直接呼び出します。

    var element = document.createElement("FireShotDataElement");
element.setAttribute("Entire", true);
element.setAttribute("Action", 1);
element.setAttribute("Key", "");
element.setAttribute("BASE64Content", "");
element.setAttribute("Data", "C:/Users/jagilber/Downloads/whatev.jpg");

if (typeof(CapturedFrameId) != "undefined")
        element.setAttribute("CapturedFrameId", CapturedFrameId);


document.documentElement.appendChild(element);

var evt = document.createEvent("Events");
evt.initEvent("capturePageEvt", true, false);

element.dispatchEvent(evt);

注：この機能が有料版でのみ利用できるかどうかはわかりません。

2
jamespgilbert

おそらく http://html2canvas.hertzen.com/ を使用できます。次に、表示をキャプチャして処理できます。

2
liftarn

ヘッドレスブラウジングツールキットであるPhantomJsを試してみてください。 http://phantomjs.org/

次のJavascriptの例は、基本的なスクリーンショット機能を示しています。

var page = require('webpage').create();

page.settings.userAgent = 'UltimateBrowser/100';
page.viewportSize = { width: 1200, height: 1200 };
page.clipRect = { top: 0, left: 0, width: 1200, height: 1200 };

page.open('https://google.com/', function () {
  page.render('output.png');
  phantom.exit();
});
2
Jens A. Koch

私はこの投稿が5年前のものであることを理解していますが、将来の訪問のために、jQuery以外のサードパーティライブラリなしで元の投稿の質問を解決する独自のソリューションをここに追加します。

pageClone = $('html').clone();

// Make sure that CSS and images load correctly when opening this clone
pageClone.find('head').append("<base href='" + location.href + "' />");

// OPTIONAL: Remove potentially interfering scripts so the page is totally static
pageClone.find('script').remove();

htmlString = pageClone.html();

モーダルウィンドウにあるサポートフォームなど、不要と思われるDOMの他の部分を削除することもできます。または、動的コントロールとの対話を維持したい場合は、スクリプトを削除しないことを選択できます。

その文字列を非表示フィールドまたはAJAXでサーバーに送信し、サーバー側でロット全体をHTMLファイルとしてサポートメールに添付します。

これの利点は、スクリーンショットだけでなく、現在のフォームでスクロール可能なページ全体を取得できることに加えて、DOMを検査およびデバッグできることです。

2
Seth Jeffery

JavaScriptで？いいえ。私はセキュリティ会社（NetNannyタイプのもの）で働いています。ユーザーのスクリーンキャプチャを行うための唯一の効果的な方法は、非表示のアプリケーションを使用することです。

1
AcidRaZor

これはあなたにはうまくいかないかもしれませんが、IEでは snapsie プラグインを使用できます。もう開発中ではないようですが、最後のリリースが利用可能ですリンク先サイトから。

1
ars

activeXコントロールが必要です。それなしでは想像できません。クライアント側のActiveXコントロールのインストールが機能し、キャプチャできるようになったら、ユーザーに最初にそれらをインストールするように強制できます。

1
DELETE me

Ajaxの状態、フォームフィールドのデータ、セッション情報を一時的に収集しています。次に、それをサポートデスクで再レンダリングします。すべてのブラウザーをテストして統合するため、表示上の理由からサポートケースはほとんどありません。

holidaycheck の下部にある赤いボタンをご覧ください。

あるいは、Googleの html2canvas があります。しかし、それは決してブラウザに適用されず、私はそれを試したことがない。

1
schmijos

画面を印刷しますか？古い学校といくつかのキーを押しますが、うまくいきます！

1
Toby