HTMLで表示しているページをJQueryで画像化したよ

2017-01-10Web開発/デザイン画像処理

どうも、最近はCorodvaでのアプリ開発にはまっている私です。目標は3日くらいの一つくらいのペースでアプリを公開していく感じです。何と言っても今はまだ時間がありますから…もう少ししたらまた忙しくなってしまうのでしょう…やだなー。というわけで、今回はアプリ開発の途中で使いました画像化の手法をまとめようと思います。

今回の記事では、html2canvasというライブラリを使い、HTMLで表示しているページをCanvasに描画することで DOMの画像化をやったので備忘録的にまとめていきます。

Contents

1. html2cavasの準備

まずは、画像化に使用するhtml2canvasをダウンロードしてきます。ソースコートはGitHubにあげてくださっているので、適当にダウンロードしてくれば大丈夫です。なんだかSVG版もあるみたいですが、今回は普通バージョンの”html2canvas.min.js”を使いました。
ダウンロードしたjsファイルを作業ディレクトリに移動してHTMLから読み込むのを忘れずに。

2. 実際に使ってみる

では、実際に使ってみます。と言っても使い方自体は非常に簡単です。jQueryなんかで使うセレクタを使って画像化したい要素を指定してあげるだけです。詳しくは公式ページなんかをみてもらいたいのですが、以下に簡単なサンプルを載せておきます。以下のサンプルでは、なんかいい感じのに用意したindex.htmlの中にある”test”というidに対して画像化を行うという感じのものです。画像化した結果は、”test”の下にある”result”というidを付与したdivに出力されます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html2canvas Test</title>
	</head>
	<body>
		<h3>ここから</h3>
		<div id="test">
			<!-- ここから -->
			hogehogehogehogehogehogehogehoge...
			<table>
				<tr><td>test</td><td style="color:red;">hoge</td></tr>
				<tr><td style="background-color:black;">fuga</td><td>piyo</td></tr>
				<tr><td>hoge</td><td>test</td></tr>
			</table>
			<!-- ここまで -->
		</div>
		<h3>ここまでを画像化するよ</h3>

		<h3>ここから画像だよ</h3>
		<div id="reult"><img src="" /></div>
		<h3>ここまでを画像だよ</h3>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
		<script>
			$(function() {
				html2canvas($('#test'), { onrendered: function(canvas) {
					var imgData = canvas.toDataURL();
					$('#reult img')[0].src = imgData;
				}});
			});
		</script>
	</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>html2canvas Test</title>

</head>

<body>

hogehogehogehogehogehogehogehoge...

<table>

</table>

</div>

<h3>ここまでを画像化するよ</h3>

<h3>ここから画像だよ</h3>

<h3>ここまでを画像だよ</h3>

$(function() {

html2canvas($('#test'), { onrendered: function(canvas) {

var imgData = canvas.toDataURL();

$('#reult img')[0].src = imgData;

}});

});

</script>

</body>

</html>

上記のコードではお試しがしやすいようにライブラリの読み込みはCDNを利用しています。多分上記のコードをコピペしてブラウザで開くだけで結果が得られると思います。結果を見ると、一応CSSのスタイリングなんかも反映されるみたいですね。

3. 問題が発生したら？

今回自分の環境では問題は特に発生しませんでしたが、CSSで”display:none”なんかを設定しているとうまく画像化できないみたいです。その時は別の方法を検討するしかないようです。また、画像化したい範囲には外部のリソースを含めてはいけないみたいです。引っかかることが多そうな例を挙げると、画像やCSSなんかでしょうか？これらを加えて画像化したい場合はローカルに置いてから実行してみてください。