html2canvas转为图片记录（异步转同步问题、iframe问题）

最新推荐文章于 2024-06-18 07:00:00 发布

menghuanzhiming

最新推荐文章于 2024-06-18 07:00:00 发布

阅读量6.3k

点赞数

分类专栏： js jquery 文章标签： html2canvas

本文链接：https://blog.csdn.net/menghuanzhiming/article/details/103462098

版权

js 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

jquery

18 篇文章 0 订阅

订阅专栏

参考链接：
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>

menghuanzhiming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
9
评论
html2canvas转为图片记录（异步转同步问题、iframe问题）

参考链接：1.html2canvas转为图片异步转同步问题（记录）https://blog.csdn.net/u011099093/article/details/86679489html2canvas循环截图iframe简单案例：注意：iframe不能隐藏，隐藏后html2canvas无法完成截图，可以曲线救国，更改透明度，或者利用位置偏移到看不见的地方；<!DOCTYPE htm...
复制链接

扫一扫