JQuery html2canvasを使ってブラウザから特定の場所をスクリーンショットする方法

2024年5月20日

クリックで簡単にスクリーンショットを撮りたかったんです
例えば管理パネルで特定商取引法の表記を作ったとして文字列のままだとスパムメールがクソほど来るし、あんまりみて欲しくない住所や名前のページも丸わかりで余計な営業チラシや封筒や業者からの電話が鳴るようになる

正直めちゃくちゃ不快だし、知らない番号からガンガン電話がかかってくるのは頂けない

なので、管理ページで特商法のページを入力して、スクリーンショットボタンをポチッと押したら、該当部分だけがキャプチャされて画像で保存出来れば嬉しいなと・・・

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>テーブルスクリーンショット</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-5">
		<table id="target-table" class="table table-bordered">
			<thead class="thead-dark">
				<tr>
					<th>列1</th>
					<th>列2</th>
					<th>列3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>データ1</td>
					<td>データ2</td>
					<td>データ3</td>
				</tr>
				<!-- 他の行 -->
			</tbody>
		</table>
		<button id="screenshot-btn" class="btn btn-primary">スクリーンショットを撮る</button>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#screenshot-btn").click(function(){
				html2canvas(document.getElementById("target-table")).then(function(canvas) {
					var imgData = canvas.toDataURL("image/png");
					var link = document.createElement(\'a\');
					link.href = imgData;
					link.download = \'table-screenshot.png\';
					link.click();
				});
			});
		});
	</script>
</body>
</html>

はい　こんな感じ
Bootstrap4.5を利用してますけど、ちゃんとみたままCSSが反映された状態のをまるっとスクショ撮れます。

よかったらシェアしてね！