回答編集履歴

1

ソリューションを思いついたのでサンプルコードを追加

2017/11/26 02:20

投稿

defghi1977
defghi1977

スコア4756

test CHANGED
@@ -1,4 +1,10 @@
1
+ 追記)後日条件付きながら解決策を思いついたため, 記事後半にサンプルを追記しました.
2
+
3
+
4
+
5
+ ---
6
+
1
- 出来ません.
7
+ (基本的に)出来ません.
2
8
 
3
9
 
4
10
 
@@ -10,14 +16,100 @@
10
16
 
11
17
 
12
18
 
13
- 従って, 現在表示していないURLのWEBページをhtml2canvas画像化することは出来ません. また, Ajaxなどを用いてWEBページ情報をDOMツリーとして入手しても, それを`canvas`上に描くためには`window.document`にそのDOMツリーを所属させなければならず, スクリプトやスタイル設定が競合する可能性が高いことから正しく動作することはないでしょう.
19
+ 従って, 現在表示していないURLのWEBページ, もしくはオリジンが異なるためにそもそもHTMLDOMにアクセス出来ないURLのWEBページをhtml2canvasを用いて画像化することは出来ません.
14
-
15
-
16
-
17
- ---
18
20
 
19
21
 
20
22
 
21
23
  なお, 単にWEBページのスクリーンショットを撮るだけであれば, WEBブラウザの開発ツールに相応の機能があるため, そちらを使ったほうが良いでしょう.
22
24
 
23
25
  また, ヘッドレスChromeを用いてコマンドラインから目的のURLのWEBページを画像化する方法もあります.
26
+
27
+
28
+
29
+ ---
30
+
31
+ なお, 同一オリジンのWEBページであれば`iframe`要素に当該ページを読み込んだ後, html2canvasを後付で実行することで間接的に"キャプチャ"画像を取得することは可能です.
32
+
33
+ (が, html2canvasのレンダリング性能を鑑みるとある程度妥協が必要です)
34
+
35
+
36
+
37
+ ```JavaScript
38
+
39
+ "use strict";
40
+
41
+ //キャプチャのトリガ
42
+
43
+ out.onclick = e => {
44
+
45
+ //目的のURLをiframeに読み込む
46
+
47
+ const iframe = document.createElement("iframe");
48
+
49
+ document.body.appendChild(iframe);
50
+
51
+ iframe.onload = e => {
52
+
53
+ const iwin = iframe.contentWindow;
54
+
55
+ //メインウインドウにキャプチャ結果を渡すコールバックの定義
56
+
57
+ iwin.__callback = function(id){
58
+
59
+ iframe.remove();
60
+
61
+ const canvas = document.createElement("canvas");
62
+
63
+ canvas.width = id.width;
64
+
65
+ canvas.height = id.height;
66
+
67
+ canvas.getContext("2d").putImageData(id, 0, 0);
68
+
69
+ document.body.appendChild(canvas);
70
+
71
+ };
72
+
73
+ //iframe内にhtml2canvasによるキャプチャ機構を挿入する
74
+
75
+ const doc = iwin.document;
76
+
77
+ const script = doc.createElement("script");
78
+
79
+ script.textContent = `
80
+
81
+ "use strict";
82
+
83
+ {
84
+
85
+ const script = document.createElement("script");
86
+
87
+ script.src = "html2canvas.min.js";
88
+
89
+ script.onload = e => {
90
+
91
+ html2canvas(document.body, {
92
+
93
+ onrendered: canvas => window.__callback(canvas.getContext("2d").getImageData(0,0,canvas.width,canvas.height)),
94
+
95
+ width: 200,
96
+
97
+ height: 300
98
+
99
+ });
100
+
101
+ }
102
+
103
+ document.head.appendChild(script);
104
+
105
+ }`;
106
+
107
+ doc.head.appendChild(script);
108
+
109
+ };
110
+
111
+ iframe.src = "target.htm";
112
+
113
+ };
114
+
115
+ ```