哈尔滨最新广州seo网站推广
方案：
- canvas
- puppeteer （无头浏览器）
- html2canvas
使用html2canvas实现：
考虑：1. 截图区域：全页面截图，局部截图、特定区域截图
2. 函数式、组件式
实现代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>页面截图</title><script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js"></script></head><body><h1>页面截图示例</h1><p>这是一个简单的页面截图示例。</p><button id="captureBtn" onclick="capturePage()">截图</button><script>function html2canvasToImage(dom) {// 使用html2canvas将页面转换为canvashtml2canvas(dom).then((canvas) => {// 创建一个链接元素const link = document.createElement("a");link.href = canvas.toDataURL(); // 将canvas转换为图片URLlink.download = "screenshot.png"; // 设置下载文件名link.click(); // 模拟点击链接下载图片});}function capturePage() {// 截取整个页面let dom = document.body;html2canvasToImage(dom);}</script></body>
</html>