参考链接：
1.html2canvas转为图片异步转同步问题（记录）https://blog.csdn.net/u011099093/article/details/86679489
html2canvas循环截图iframe简单案例：
注意：iframe不能隐藏，隐藏后html2canvas无法完成截图，可以曲线救国，更改透明度，或者利用位置偏移到看不见的地方；
<!DOCTYPE html>
<html style="overflow-x:auto;overflow-y:auto;">
<head>
<title>门户模板管理</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script type="text/javascript">
window.onload=function(){
var tdList = $(".tdPreview");
$(".iframeTemplate").each(function(index) {
var num = index;
var iframe = this;
var pagePreview = $(this).contents().find("#pagePreview");
html2canvas(pagePreview[0], {
useCORS : true
}).then(function(canvas) {
var url = canvas.toDataURL('image/png');
var image = '<img style="height:240px;width:160px" src="' + url +'"/>';
$(tdList[num]).empty();
$(tdList[num]).append(image);
$(iframe).remove();
});
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="/admin/portals/portalpage/portalPageTemplate/">门户模板列表</a></li>
</ul>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>模板名称</th>
<th>模板预览</th>
<th>创建日期</th>
<th>更新日期</th>
</tr>
</thead>
<tbody>
<tr class="table-nowrap">
<td>
测试1
</td>
<td class="tdPreview">
</td>
<td>
2019-12-09 16:57:23
</td>
<td>
2019-12-09 17:22:40
</td>
<td style="font-size: medium;">
</td>
</tr>
<tr class="table-nowrap">
<td>
测试1
</td>
<td class="tdPreview">
</td>
<td>
2019-12-09 16:54:17
</td>
<td>
2019-12-09 16:54:17
</td>
</tr>
</tbody>
</table>
<div style="clear:both;"></div></div>
<iframe class="iframeTemplate" width="100%" height="100%" style="opacity: 0;position: fixed;z-index: -1;top: 0;" src="html2canvasIframe.html"></iframe>
<iframe class="iframeTemplate" width="100%" height="100%" style="opacity: 0;position: fixed;z-index: -1;top: 0;" src="html2canvasIframe.html"></iframe>
</body>
</html>
