追記)後日条件付きながら解決策を思いついたため, 記事後半にサンプルを追記しました.
(基本的に)出来ません.
まず, html2canvasはWEBページキャプチャツールではありません. HTMLDOMのレンダラです. つまりスタイル情報等を元にcanvas
要素上にHTMLを描いているのです.
また, スタイル情報を現在表示しているwindow.document
を頂点とするDOMツリーから取得するため, html2canvasに渡すelement
はこのDOMツリーに配置されている必要があります.
従って, 現在表示していないURLのWEBページ, もしくはオリジンが異なるためにそもそもHTMLDOMにアクセス出来ないURLのWEBページをhtml2canvasを用いて画像化することは出来ません.
なお, 単にWEBページのスクリーンショットを撮るだけであれば, WEBブラウザの開発ツールに相応の機能があるため, そちらを使ったほうが良いでしょう.
また, ヘッドレスChromeを用いてコマンドラインから目的のURLのWEBページを画像化する方法もあります.
なお, 同一オリジンのWEBページであればiframe
要素に当該ページを読み込んだ後, html2canvasを後付で実行することで間接的に"キャプチャ"画像を取得することは可能です.
(が, html2canvasのレンダリング性能を鑑みるとある程度妥協が必要です)
JavaScript
1"use strict";
2//キャプチャのトリガ
3out.onclick = e => {
4 //目的のURLをiframeに読み込む
5 const iframe = document.createElement("iframe");
6 document.body.appendChild(iframe);
7 iframe.onload = e => {
8 const iwin = iframe.contentWindow;
9 //メインウインドウにキャプチャ結果を渡すコールバックの定義
10 iwin.__callback = function(id){
11 iframe.remove();
12 const canvas = document.createElement("canvas");
13 canvas.width = id.width;
14 canvas.height = id.height;
15 canvas.getContext("2d").putImageData(id, 0, 0);
16 document.body.appendChild(canvas);
17 };
18 //iframe内にhtml2canvasによるキャプチャ機構を挿入する
19 const doc = iwin.document;
20 const script = doc.createElement("script");
21 script.textContent = `
22 "use strict";
23 {
24 const script = document.createElement("script");
25 script.src = "html2canvas.min.js";
26 script.onload = e => {
27 html2canvas(document.body, {
28 onrendered: canvas => window.__callback(canvas.getContext("2d").getImageData(0,0,canvas.width,canvas.height)),
29 width: 200,
30 height: 300
31 });
32 }
33 document.head.appendChild(script);
34 }`;
35 doc.head.appendChild(script);
36 };
37 iframe.src = "target.htm";
38};
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/25 11:38
2017/11/26 06:08 編集
2017/11/26 06:13
2017/11/26 06:16
2017/11/26 06:23
2017/11/26 06:26
2017/11/26 06:32
2017/11/26 06:37
2017/11/26 06:38
2017/11/26 06:54
2017/11/26 07:07
2017/11/26 07:09