<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html2canvas</title>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<style>
.box{
padding: 10px;
background: grey;
width: 200px;
}
</style>
</head>
<body>
<h1>html内容</h1>
<div id="htmlcanvas" class="box" >
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<strong>strong</strong>
</div>
<h1>canvas内容</h1>
<div id="canvas"></div>
<h1>image内容</h1>
<img id="image" src=""/>
<script>
html2canvas(document.querySelector("#htmlcanvas")).then(canvas => {
document.getElementById("canvas").appendChild(canvas);
// 转成图片
canvasToImage(canvas);
});
// Converts canvas to an image
function canvasToImage(canvas) {
document.getElementById("image").setAttribute('src',canvas.toDataURL("image/png"))
}
</script>
</body>
</html>
x效果图
