html2canvas同域下截取其他网页截图，并在当前页面显示缩略图-CSDN博客

html2canvas.js的官网提供的示例可以在当前页面截图。

同事采用了window.open方式，新打开页面截图，然后关闭的方式实现。不满意实现效果（多次重复的时候会打开关闭打开关闭这样重复跳页面焦点，看起来很烦）

寻找解决办法，尝试window.open打开新页面的时候通过设置属性，不变更焦点，然后发现chrome没有这个参数（ie低版本好像可以？）

开发环境是纯前端环境，使用node.js的http-server模块实现http服务

该代码“卖点”在于：

不会有额外的效果显示，直接出截图

基本步骤及原理：

使用ajax请求页面数据，注入依赖和截图用的js，iframe.open，写入hack后的html代码，iframe.close。iframe页面渲染完毕后会自动执行js代码，并将截图生成的数据转到父frame（当前页面），用img标签显示。

注意：

#1、iframe宽度等于页面宽度，所以当前浏览器宽度是多少，预览页面就是对应宽度的样子。

#2、已经截取过的页面重复截取，canvas部分会出问题，之前看过一个例子，似乎改了html2canvas中的部分源码，可以做到每次加载后跟一个随机变量，就可以解决这个问题。

参考：

https://stackoverflow.com/questions/25979469/codemirror-html2canvas-save-iframe-as-image

以下为源码：

<!DOCTYPE html>
<html>
<head>
	<title>Snap a Picture of Preview</title>
	<meta charset='utf-8'>
	<meta name='viewport' content='initial-scale=1.0'>
	<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
	<script src='http://192.168.10.123:9293/canvas_demo/assets/plugins/html2canvas/html2canvas.js'></script>
	<style type='text/css'>
		body {
			overflow-x: hidden;
		}

		iframe {
			width: 100%;
			height: 0px;
			border-width: 0px;
		}

		#codes textarea {
			width: 100%;
			height: 200px;
			border-width: 0px;
			border-bottom: solid 1px black;
		}

		#thumbnails img {
			width: 100%;
		}

		.image-container {
			display: inline-block;
			background-color: #eee;
			border: solid 1px gray;
			border-radius: 5px;
			box-shadow: 0 0 15px 5px lightgray;
			width: 400px;
			height: 600px;
			overflow-y: hidden;
			margin-right: 20px;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<div id="codes" style="display: none;">
		<!-- <textarea id='code_idx'></textarea> -->
	</div>

	<div id="iframes">
		<!-- <iframe id="preview_idx"></iframe> -->
	</div>

	<div id="thumbnails">
		<!-- <div class="image-container">
			<img src="{src}" />
		</div> -->
	</div>

	<script>
		var idx = 0;
		// 要截图的页面地址
		var urlList = [
			'http://192.168.10.123:9293/bs_demo/page_3_fullPath.html',
			'http://192.168.10.123:9293/dev_test/index3.html'
		];

		// 初始化，加载所有页面源码，注入js，渲染所有iframe，注入的js被调用，截图
		$.each(urlList, function(idx){
			$('#iframes').append('<iframe id="preview_' + idx + '"></iframe>');
			$('#codes').append('<textarea id="code_' + idx + '"></textarea>');
			(function(_idx){
				$.ajax({
					url: urlList[_idx],
					success: function(data) {
						$('#code_' + _idx).val(data);

						var content = 
							'<script src="http://code.jquery.com/jquery-latest.min.js"><\/script>';
						addJSToHead('code_' + _idx, content);
						
						var content = 
							'<script src="http://192.168.10.123:9293/canvas_demo/assets/plugins/html2canvas/html2canvas.js"><\/script>';
						addJSToHead('code_' + _idx, content);
						
						var content = 
							'<script type="text/javascript">\n' +
							'	console.log("Code is Injected.");\n' +
							'	$(document).ready(function() {\n' +
							'		setTimeout(function(){\n' +
							'			html2canvas($("body"), {\n' +
							'				onrendered: function(canvas) {\n' +
							'					console.log("Html2canvas onrendered.");\n' +
							'					var myImage = canvas.toDataURL("image/png");\n' +
							'					$(parent.document).find("#thumbnails").append(\'<div class="image-container"><img src=\' + myImage + \' alt="" /></div>\');\n' +
							'				}\n' +
							'			});\n' +
							// 这里等待1秒是为了等待canvas的图表的动态效果执行完毕再截图，如果页面没有动画效果，可以设置为0
							'		}, 1000);\n' +
							'	});\n' +
							'<\/script>';
						addJSToBody('code_' + _idx, content);

						setTimeout(function(){
							var previewFrame = $('#preview_' + _idx)[0];
							var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;

							preview.open();
							preview.write($('#code_' + _idx).val());
							preview.close();
						}, 0);
					}
				});
			})(idx);
		});

		// 注入js到head的方法
		function addJSToHead(id, content) {
			var pageContent = $('#' + id).val();

			var searchText = pageContent.search('<head>');
			if(searchText > 0) {
				content = '<head>' + '\n' + content;
				var updatedPageContent = pageContent.replace('<head>', content);
				$('#' + id).val(updatedPageContent);
			}
			else {
				alert('WARNING! The &lt;head&gt tag seems to be missing in your HTML. Although your code may still work, we highly recommened that you have a valid HTML syntax. Please refer to the new document of correct formatted');
				content = content + pageContent;
				return false;
			}
		}

		// 注入js到body的方法
		function addJSToBody(id, content) {
			var pageContent = $('#' + id).val();

			var searchText = pageContent.search('<body>');
			if(searchText > 0) {
				content = '<body>' + '\n' + content;
				var updatedPageContent = pageContent.replace('<body>', content);
				$('#' + id).val(updatedPageContent);
			}
			else {
				alert('WARNING! The <body> tag seems to be missing in your HTML. Although your code may still work, we highly recommened that you have a valid HTML syntax. Please refer to the new document of correct formatted');
				content = content + pageContent;
				return false;
			}
		}
	</script>
</body>
</html>

以下为运行效果截图：