chilohwei / web-screenshot-tool

输入任意URL网址，获取该网页的截图。基于React，代码由 AI 编写。

网页在线截图工具

点击查看演示视频

简介

网页在线截图工具是一个简单易用的在线工具，用户可以输入任意网址并获取该网页的截图。由 Chiloh 主导，ChatGPT 辅助编写实现，代码 100% 由 AI 创作。该工具支持桌面版和移动版截图，并提供一键下载功能。

功能

• 输入网址：用户可以输入任意有效的 URL。
• 截图预览：实时显示输入网址的截图预览。
• 切换设备：支持桌面版和移动版的截图。
• 下载截图：一键下载生成的截图。

技术栈

• 前端：React
• 后端：Node.js, Express

使用方法

在线使用

1. 访问 网页在线截图工具。
2. 在输入框中输入你想要截图的网页 URL。
3. 点击“获取截图”按钮。
4. 预览区域将显示生成的截图。
5. 点击“下载截图”按钮，将截图保存到本地。

本地开发

1. 克隆仓库：

   git clone https://github.com/chilohwei/web-screenshot-tool.git 
   cd web-screenshot-tool

2. 进入backend，安装依赖：

   npm install express puppeteer winston express-validator

3. 启动后端服务：

   node server.js

4. 进入frontend，安装依赖：

   npm install

5. 运行前端服务：

   npm start

6. 在浏览器中打开 http://localhost:3000。

贡献

欢迎贡献代码！请 fork 本仓库并提交 Pull Request。如果有任何问题或建议，请提交 Issue。

许可证

本项目采用 MIT 许可证。