本文主要是介绍案例-html2canvas,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
效果图:
源码:
<!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) {// console.log(val)h2c()}function h2c () {html2canvas(document.querySelector("#capture")).then(canvas => {imgDom.innerHTML = ''imgDom.appendChild(canvas);});}</script>
</body></html>
这篇关于案例-html2canvas的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!