中小企业建站系统让百度收录自己的网站
方案:
- 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>