完整demo示例代码
<!DOCTYPE html>
<html>
<head>
<title>网页转图片</title>
<style>
body {font-family: Arial, sans-serif;margin: 0;padding: 20px;}
h1 {margin-bottom: 20px;}
button {padding: 10px 20px;font-size: 16px;margin-top: 10px;}
</style>
</head>
<body>
<h1>网页转图片</h1>
<div id="content" style="width: 300px; height: 200px; background-color: #f5f5f5;">
<p>这是一个示例区域</p>
</div>
<button id="convertButton">转换</button>
<div id="output"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
document.getElementById('convertButton').addEventListener('click', function() {
html2canvas(document.getElementById('content')).then(function(canvas) {
document.getElementById('output').appendChild(canvas);
});
});
</script>
</body>
</html>
浙公网安备33010502012242号