zl程序教程

您现在的位置是:首页 > 

当前栏目

htmlToCanvas

2023-06-13 09:11:18 时间

今天分享一个htmlcanvas的插件:

http://html2canvas.hertzen.com/

使用方式特别简单:

引入:

pnpm install --save html2canvas
# import html2canvas from 'html2canvas';

或者直接上link

<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

需要转换的html节点

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

使用:

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

效果:

点我,然后往下翻

function btnclick(){ html2canvas(document.querySelector("body")).then(canvas => { document.querySelector("body").appendChild(canvas) }); }