WebPlotDigitizer 安装配置指南：从图像中提取数据的开源工具

核心价值：WebPlotDigitizer 能为你解决什么问题？

WebPlotDigitizer 是一款基于计算机视觉技术的开源工具，专为从图表图像中提取数值数据设计。无论是科研论文中的实验数据图表、技术报告中的趋势曲线，还是历史文献中的老旧图形，它都能帮助你快速将可视化图像转换为可分析的数字数据。支持 XY 轴、极坐标、三元图和地图等多种图表类型，广泛应用于科研数据分析、工程测量和学术研究领域。

环境准备：如何确认系统是否已安装必要环境？

系统要求检查清单

• 操作系统：Windows、macOS 或 Linux（本文以 Linux 为例）
• 基础依赖：Node.js（JavaScript 运行环境）和 npm（Node.js 包管理器）
• 浏览器支持：Google Chrome、Firefox、Safari 或 Internet Explorer 11

开发环境验证步骤

⏱️ 预计耗时：3分钟

1. 检查 Node.js 是否已安装

   node -v
   

   ✅ 验证方式：输出 v14.x 或更高版本号（如 v16.14.2）

2. 检查 npm 是否已安装

   npm -v
   

   ✅ 验证方式：输出 6.x 或更高版本号（如 8.5.0）

3. 安装缺失依赖（如未安装 Node.js 和 npm）

   • Ubuntu/Debian 系统：

     sudo apt update && sudo apt install nodejs npm
     

   • macOS 系统（需先安装 Homebrew）：

     brew install node
     

快速上手：如何在5分钟内启动项目？

步骤1：获取项目源代码

⏱️ 预计耗时：2分钟（取决于网络速度）

git clone https://gitcode.com/gh_mirrors/web/WebPlotDigitizer

功能说明：克隆仓库（将项目源代码下载到本地计算机）

步骤2：安装项目依赖

⏱️ 预计耗时：3分钟（取决于网络速度和系统性能）

cd WebPlotDigitizer/app
npm install

功能说明：安装项目依赖（下载并配置运行所需的第三方组件）

步骤3：构建项目代码

⏱️ 预计耗时：1分钟

./build_js.sh

功能说明：构建 JavaScript 文件（将多个源代码文件合并为可执行脚本）

步骤4：启动 Web 服务

⏱️ 预计耗时：1分钟

cd ../webserver
go run main.go

功能说明：启动 Web 服务器（在本地计算机上运行一个临时网页服务）

步骤5：访问应用程序

在浏览器中输入以下地址：

http://localhost:8080

✅ 验证方式：页面显示 WebPlotDigitizer 主界面，顶部导航栏包含"文件"、"编辑"、"视图"等菜单选项

深度配置：如何根据需求调整系统参数？

配置文件位置与结构

项目核心配置文件位于 webserver/settings.json（需从示例文件复制创建）：

cd webserver
cp settings.json.example settings.json

常用配置参数详解

1. 端口号配置

{
  "port": "8080"
}

🔧 修改场景示例：

• 当 8080 端口被其他服务占用时，可修改为未被占用的端口号（如 3000、8888 等）
• 生产环境建议使用 80 端口（需管理员权限）

2. 日志配置

{
  "logging": {
    "enabled": true,
    "path": "log"
  }
}

🔧 修改场景示例：

• 开发调试时启用日志记录（enabled: true）
• 生产环境为节省磁盘空间可禁用日志（enabled: false）

3. 数据存储配置

{
  "storage": {
    "enabled": true,
    "path": "storage"
  }
}

🔧 修改场景示例：

• 需要保存用户项目数据时启用存储功能（enabled: true）
• 公共服务器环境建议禁用本地存储（enabled: false）

配置生效方式

修改配置文件后，需重启 Web 服务使配置生效：

# 先按 Ctrl+C 停止当前服务，然后重新启动
go run main.go

深度配置：如何构建和测试项目？

构建优化版本

# 在 app 目录下执行
npm run build

功能说明：生成压缩优化的 JavaScript 文件（wpd.min.js），适合生产环境使用

运行自动化测试

# 在 app 目录下执行
npm test

功能说明：运行测试套件验证核心功能是否正常工作 ✅ 验证方式：所有测试通过时显示 "Chrome ...: Executed ... SUCCESS"

代码格式化

# 在 app 目录下执行
npm run format

功能说明：自动格式化 JavaScript 代码，保持代码风格一致性

排障指南：常见问题如何解决？

问题1：项目启动失败，提示 "port 8080 already in use"

可能原因：

• 8080 端口已被其他应用程序占用
• 之前的 WebPlotDigitizer 服务未正常关闭

解决方案：

1. 查找占用端口的进程：

   # Linux/macOS
   lsof -i :8080
   

2. 终止占用进程（替换 PID 为实际进程 ID）：

   kill -9 PID
   

3. 或修改配置文件使用其他端口：

   {
     "port": "8081"
   }
   

问题2：浏览器访问时页面空白

可能原因：

• 项目构建未成功完成
• 浏览器缓存问题
• 依赖包安装不完整

解决方案：

1. 重新构建项目：

   cd app
   ./build_js.sh
   

2. 清除浏览器缓存（快捷键 Ctrl+Shift+R 或 Cmd+Shift+R）
3. 重新安装依赖：

   cd app
   rm -rf node_modules
   npm install
   

问题3：数据提取结果不准确

可能原因：

• 图表图像质量不佳
• 坐标轴校准不准确
• 未正确设置图表类型

解决方案：

1. 使用更高分辨率的图表图像
2. 重新进行坐标轴校准，确保参考点准确
3. 在"设置"中选择正确的图表类型（XY、极坐标、三元图等）

项目结构概览

WebPlotDigitizer 项目主要包含以下关键目录和文件：

• app/：Web 应用程序核心代码
  • javascript/：主要功能实现代码
  • images/：图表类型示例和界面图标
  • templates/：HTML 页面模板
  • tests/：自动化测试代码
• webserver/：Web 服务器代码
• docs/：项目文档和用户手册
• electron/：桌面应用程序相关代码
• node_examples/：Node.js 使用示例

官方文档：docs/JSON_format_specification.md

总结

通过本文档，你已掌握 WebPlotDigitizer 的安装配置全过程，包括环境准备、快速启动、深度配置和故障排除。这款强大的开源工具能够帮助你从图像中高效提取数值数据，为科研分析和工程计算提供有力支持。如需进一步了解高级功能和API使用方法，请参考项目内置文档和示例代码。