html2canvas implements screenshots of web pages based on DOM element styles

<html>
	<head>
		<meta name="layout" content="main">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="./html2canvas.js"></script>
		<!--<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>-->

		<script type="text/javascript">
			$(document).ready(function() {
				$("#button").on("click", function(event) {
					event.preventDefault();
					html2canvas(document.body, {
						allowTaint: true,
						taintTest: false,
						unrendered: function(canvas) {
							canvas.id = "mycanvas";
							//document.body.appendChild(canvas);
							//Generate base64 image data
							var dataUrl = canvas.toDataURL();
//							console.log(dataUrl);
							var newImg = document.createElement("img");
							newImg.src = dataUrl;
							document.body.appendChild(newImg);
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<textArea id="textArea" col="20" rows="10">
			add test content here
		</textArea>
		<input id="button" type="button" value="截屏">
		The screenshot generated image is as follows:
	</body>
</html>

 

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326864964&siteId=291194637