js实现将div转成图片

html代码

引入正确的jquery.js以及html2canvas.js路径

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>div-svg-base64</title>
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="./js/html2canvas.js"></script>
		<style>

		</style>
	</head>

	<body>
		<div id="div">
			<table border="1">
				<tr>
					<th style="color:red;">Header</th>
				</tr>
				<tr>
					<td>Data</td>
				</tr>
			</table>
		</div>
		<input type="button" value="click" onclick="cutDiv()" />
		<img src='' id="img2" />
	</body>
	<script>
		function cutDiv() {
			var divContent = document.getElementById("div").innerHTML;
			var data = "data:image/svg+xml," +
				"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
				"<foreignObject width='100%' height='100%'>" +
				"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
				divContent +
				"</div>" +
				"</foreignObject>" +
				"</svg>";
			var img = new Image();
			img.src = data;
			var canvas = document.createElement("canvas");
			var ctx = canvas.getContext("2d");
			img.crossOrigin = "anonymous";
			img.onload = function() {
				ctx.drawImage(img, 0, 0);
				var canvasbase = canvas.toDataURL();
				document.getElementById("img2").setAttribute('src', canvasbase)
			}

		}
	</script>

</html>

功能效果

在这里插入图片描述

点击左下角button按钮实现将id为div的html页面转成图片输出在下方。

# javascript # 前端 # html5
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

实践探讨Python如何进行异常处理与日志记录

avatar 华为云开发者联盟
cover

HCDG天津站精彩回顾 | AI高效开发， ModelArts技术动手工作坊

avatar 华为云开发者联盟
cover

一次故障演练，十分钟自动搞定?

avatar 华为云开发者联盟