html页面转图片，截图

「已注销」

于 2021-12-21 10:52:51 发布

阅读量97

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/zhaoxuemiao/article/details/122057029

版权

js：

//转图片
	$('#htmlSaveToImg').click(function() {
		$("html , body").animate({
			scrollTop : 0
		}, 0);
		var jietu = document.getElementById("tableMain");//要打印的dom
		jietu.style.backgroundColor = "#fff";
		html2canvas(jietu, {
			allowTaint : true,
			height : jietu.height,
			width : jietu.width,
			backgroundColor : '#fff',
			useCORS : true,
		}).then((canvas) => {
			var data = canvas.toDataURL();
			var img_data1 = Canvas2Image.saveAsPNG(canvas, true).getAttribute('src');
			parent.layer.confirm('<img src="' + img_data1 + '" width="520" height="700">', {
				title : '查看大图',
			}, function(index) {
				parent.layer.close(index);
			});
		})

html:

<html>
<body>
<button id="htmlSaveToImg">转图片</button>
</body>
<script type="text/javascript" src="../js/canvas2image.js"></script>
<script type="text/javascript" src="../js/html2canvas.js"></script>
</html>