js实现将div转成图片

最新推荐文章于 2023-05-18 11:52:35 发布

沃尔德

最新推荐文章于 2023-05-18 11:52:35 发布

阅读量5.4k

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/baidu_41941883/article/details/122230888

版权

js实现将div转成图片

- html代码
- 功能效果

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>