web-dev-qa-db-ja.com

Canvasを使用してページの「スクリーンショット」を撮ることはできますか？

CSSを使用して多数の要素を配置し、JSを使用して「上下」の位置を変更しているページがあります。

私はこれらの事柄がずれていると報告しましたが、ユーザーはこれについて「チート」するうそをつく動機を持っているので、彼らが真実を言っているかどうかは正確にはわかりません。私は、彼らが嘘をついているかどうかを理解し、「証拠」を得る方法を見つけようとしています。

Canvasには、画像要素または別のキャンバス要素（BitBlt操作の一種）から画像情報をコピーするメソッドがあることを知っています。

どうにかして、Canvas（または他の何か、Flashなど）でページの一部の「写真」を撮ることは可能でしょうか？
もう一度、情報を<image>。私は、ユーザーに見えるものをコピーしようとしています。これは、絶対に配置されたいくつかのHTML要素で構成され（そして、それらの位置に最も関心があります）、どういうわけかサーバーにアップロードします。

これができないことは理解していますが、何かが足りないかもしれません。

何か案は？

html5canvasscreenshot
67
Daniel Magliola

以前に誰かがこれに似た質問をしました。 Youtubeの一番下までスクロールし、[バグを報告]リンクをクリックします。 Googleのフィードバックツール（Javascript駆動）は、基本的にあなたが説明したことを行います。私がコードを見たところから判断すると、canvasを使用し、JPGイメージを作成してGoogleに送信するJavaScriptベースのJPEGエンコーダーを備えています。

間違いなく多くの作業になりますが、同様のことを達成できると確信しています。

10
simshaun

商用ソリューションがオプションの場合は、 SnapEngage をご覧ください。右上の「ヘルプ」ボタンをクリックして、動作を確認します。これがスクリーンショットです：-

enter image description here

セットアップは簡単で、数行のjavascriptコードをコピーして貼り付けるだけです。

SnapEngageはJavaアプレットを使用してスクリーンショットを撮影します。 Here はそれがどのように機能するかについてのブログ投稿です。

7
Salman for Hire

element を使用できます。これは現在Firefoxでのみサポートされています。

background: -moz-element(#mysite);

ここに #mysiteは、コンテンツが背景として使用される要素です

Firefoxで開く： http://jsfiddle.net/qu2kz/3/（テスト済みFF 27）

snapshot

3
Jose Rui Santos

はい、次のデモを見ることができます以下のコードでは、bodyタグ内にテーブルを定義していますが、このコードを実行すると、画像のスナップショットが表示されます。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="js/html2canvas.js?rev032"></script> 
<script type="text/javascript">
  $(document).ready(function() {
  var target = $('body');
   html2canvas(target, {
     onrendered: function(canvas) {
     var data = canvas.toDataURL();
     alert(data);
     document.body.innerHTML="<br/><br/><br/><br/><br/><br/><img src="+data+" />";
   }
 });
});
</script>       

 </head>
 <body>  
 <h1>Testing</h1>
 <h4>One column:</h4>
 <table border="1">
 <tr>
  <td>100</td>
 </tr>
 </table>
</body>

html2canvas公式ドキュメント：- http://html2canvas.hertzen.com/

Html2canvas.jsライブラリをダウンロードするには、公式リンクから見つけることができない場合にも使用できます：- https://github.com/niklasvh/html2canvas/downloads [このリンクには責任を負いません：P：P：P]

3
Gourav Makhija

これにはいくつかの制限があります。いくつかのテクニックがありますが、これらはまさにスクリーンショットを行う拡張機能の数です。あなたの説明から、一般的なクライアント側のソリューションを展開するのではなく、ユーザーまたは一部のユーザーが使用して送信できるものを探しているようですので、拡張機能を使用するのが良いと思います。

Chrome：

私のオープンソースを指すことができますChrome拡張機能、Blipshot、それはまさにそれを行います： https://github.com/folletto/Blipshot

背景を説明するだけです。

  1. 私の知る限り、拡張機能は内部関数を使用するため、拡張機能の内部からのみ実行できます。
  2. 関数はchrome.tabs.captureVisibleTabおよびマニフェストからタブへのアクセスが必要です。
  3. この関数は、アクティブなタブの表示部分のみを取得するため、必要な場合は問題ありません。 Googleが修正するまでページ全体のスクリーンショットを取得するのは非常に難しいため、スクリプト全体を見る必要があります Bug＃45209 。

Firefox：

Firefox 1.5以降では、drawWindowというCanvasのカスタム拡張機能を使用する拡張機能を構築できます。これはchrome.tabs.captureVisibleTab Chromeに相当。いくつかの情報はここにあります： https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

2
Folletto

そんなことができるとは思いません。ただし、再帰的にフェッチできます clientHeight 、 clientWidth 、 offsetTop および- offsetLeft は、ページ上のすべての要素の位置を決定し、サーバーに送り返します。

2
thejh

Firefoxでは、canvas.drawWindowを使用してWebコンテンツをキャンバスに描画するAddOnを作成できます。 https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

現時点では、WebKitでそれを行う方法はないと思います。

2
Ilmari Heikkinen