URLからhtml2canvasでURL先のWEBページをキャプチャしたい

Question

###URLからhtml2canvasでURL先のWEBページをキャプチャしたい
html2canva初心者です。
指定したURLからhtml2canvasで指定URL先のWEBページをキャプチャしたいです。

###コード

$(function() {
    html2canvas(Element(キャプチャしたい要素), { onrendered: function(canvas) {
    var imgData = canvas.toDataURL();
    $('表示したい要素')[0].src = imgData;
    }});
});

私の理解では、上記コード中の"Element"でキャプチャする要素を指定しているような気がします。

試したこと、考えたこと
１．ElementにURLを指定　→　できない
２．URLを要素に変換？？？　→　できない

どのように、実装したらよいでしょうか？
ご教授お願いいたします。

###追記
作りたいもの：chrome extention　→　検索結果のプレビューを表示したい　
イメージ：serchpreview

Answer 1

追記)後日条件付きながら解決策を思いついたため, 記事後半にサンプルを追記しました.

---

(基本的に)出来ません.

まず, 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のレンダリング性能を鑑みるとある程度妥協が必要です)

"use strict";
//キャプチャのトリガ
out.onclick = e => {
	//目的のURLをiframeに読み込む
	const iframe = document.createElement("iframe");
	document.body.appendChild(iframe);
	iframe.onload = e => {
		const iwin = iframe.contentWindow;
		//メインウインドウにキャプチャ結果を渡すコールバックの定義
		iwin.__callback = function(id){
			iframe.remove();
			const canvas = document.createElement("canvas");
			canvas.width = id.width;
			canvas.height = id.height;
			canvas.getContext("2d").putImageData(id, 0, 0);
			document.body.appendChild(canvas);
		};
		//iframe内にhtml2canvasによるキャプチャ機構を挿入する
		const doc = iwin.document;
		const script = doc.createElement("script");
		script.textContent = `
		"use strict";
		{
			const script = document.createElement("script");
			script.src = "html2canvas.min.js";
			script.onload = e => {
				html2canvas(document.body, {
					onrendered: canvas => window.__callback(canvas.getContext("2d").getImageData(0,0,canvas.width,canvas.height)),
					width: 200,
					height: 300
				});
			}
			document.head.appendChild(script);
		}`;
		doc.head.appendChild(script);
	};
	iframe.src = "target.htm";
};

Comments

[merico]

そうなのですか。
知識不足でした。
では、別の対策を取ってみます！

お返事ありがとうございます！

[merico]

詳しくありがとうございます！
教えていただいたコードを使用させていただきました。

```javascript
$(document).ready(function(){
"use strict";
//目的のURLをiframeに読み込む
const iframe = document.createElement("iframe");
document.body.appendChild(iframe);
iframe.onload = e => {
const iwin = iframe.contentWindow;
//メインウインドウにキャプチャ結果を渡すコールバックの定義
iwin.__callback = function (id) {
iframe.remove();
const canvas = document.createElement("canvas");
canvas.width = id.width;
canvas.height = id.height;
canvas.getContext("2d").putImageData(id, 0, 0);
document.body.appendChild(canvas);
};
//iframe内にhtml2canvasによるキャプチャ機構を挿入する
const doc = iwin.document;
const script = doc.createElement("script");
script.textContent = `
"use strict";
{
const script = document.createElement("script");
script.src = "html2canvas.min.js";
script.onload = e => {
html2canvas(document.body, {
onrendered: canvas => window.__callback(canvas.getContext("2d").getImageData(0,0,canvas.width,canvas.height)),
width: 200,
height: 300
});
}
document.head.appendChild(script);
}`;
doc.head.appendChild(script);
};
iframe.src = "www.google.co.jp";//googleにしてみました

})
```

としてみました。
実行結果で、エラーが出てしまいました。

エラー：Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.at HTMLIFrameElement.iframe.onload.e(エラー箇所)

エラー箇所：iwin.__callback = function (id)

です。どのように対処したらよいでしょうか？

[defghi1977]

このサンプルコードは同一オリジン、つまり「同じサイト」からでないと上手く行きません. セキュリティの観点から, あなた自作サイトから異なるオリジンの「http://www.google.co.jp」へのアクセスはできません. だから”基本的に無理”なんです.

[merico]

理解しました…
そういうことだったのですね。
素早い対応ありがとうございます！

[defghi1977]

但し, これは無垢のWEBブラウザの話であって, WebExtensionとかuser scriptを使ってAPIに穴を開けることは出来ます. そのため, 利用環境やOS, ブラウザに条件を漬けることで実現可能性はもう少し広がります. また, サーバーサイドでWEBページをキャプチャしそれをクライアントに送信する方法もあります.

[merico]

Chrome extensionを制作していて、検索結果webページのプレビューを表示したいと考えています。その場合の解決策等がありましたら教えていただいたきたいです。
イメージしているのは、searchpreviewというchrome extensionです。

[think49]

横から失礼します。

To: mericoさん
本スレッドで継続質問する場合は本質問を再オープンして、マルチスレッド先を閉じて下さい。
teratailではマルチポストは非推奨とされています。
https://teratail.com/questions/102065
https://teratail.com/help#posted-otherservice

[merico]

ご指摘ありがとうございます。
先ほど、マルチスレッド先の削除リクエストをいたしました。

[defghi1977]

searchpreviewはサーバーサイドでサムネイルを作っています. ですからhtml2canvasによる方法とは質が違います.

[merico]

分かりました。
html2canvas以外の方法を考えます。
では、他にどのような方法があるのでしょうか？
ご意見いただきたいです。

[defghi1977]

当初の質問とは内容がかけ離れていますから, 本スレッドはここで終了とすべきでしょう.
>他にどのような方法があるのでしょうか？
既に回答済みです. また, あなたの欲しい機能を実現しているアドオンが存在するのですから, いろいろ調査のしようはあるというものです. その上で判らないことがあったらもう一度質問して下さい.

[merico]

長らくありがとうございました。
頑張ります！