Renderings:
source code:
<!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>
</style>
</head>
<body style="backgorund:#eee;">
<div id="capture" style="padding: 10px; background: #67a8ea">
<h4 style="color: #000; ">Hello world!</h4>
<textarea type="text" value="" id="txtDom" cols="80" rows="6" oninput="textChange(this.value)"></textarea>
<h2>你好这是测试</h2>
</div>
<h3>这是canvas</h3>
<div id="imgDom"></div>
<script>
const imgDom = document.getElementById('imgDom')
h2c()
function textChange (val) {
h2c()
}
function h2c () {
html2canvas(document.querySelector("#capture")).then(canvas => {
imgDom.innerHTML = ''
imgDom.appendChild(canvas);
});
}
</script>
</body>
</html>