首页html2canvas 截图

html2canvas 截图

时间: 2023-08-30 22:10:51 浏览: 123

html2canvas 是一种 JavaScript 库，可以将 HTML 元素转换为 Canvas，从而实现截图功能。以下是一个简单的例子： ```html <!DOCTYPE html> <html> <head> <title>html2canvas Demo</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> </head> <body> <div id="myDiv"> <h1>Hello, World!</h1> <p>This is a demo of html2canvas.</p> </div> <button onclick="capture()">Capture</button> <script> function capture() { html2canvas(document.getElementById("myDiv")).then(function(canvas) { document.body.appendChild(canvas); }); } </script> </body> </html> ``` 在这个例子中，我们使用了 html2canvas 库，将 id 为 myDiv 的 HTML 元素转换为 Canvas。当用户点击按钮时，调用 capture 函数，将 Canvas 添加到页面中。需要注意的是，由于该库需要将 HTML 元素转换为 Canvas，因此需要等待元素加载完成后才能进行截图。如果需要截图的元素包含图片或其他异步加载的内容，需要等待这些内容加载完成后再进行截图。

阅读全文