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

2026-02-06 05:54:48作者：幸俭卉

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

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

$WebPlotDigitizer 界面截图$

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

系统要求检查清单

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

开发环境验证步骤

⏱️ 预计耗时：3分钟

检查 Node.js 是否已安装
```
node -v
```
✅ 验证方式：输出 v14.x 或更高版本号（如 v16.14.2）
检查 npm 是否已安装
```
npm -v
```
✅ 验证方式：输出 6.x 或更高版本号（如 8.5.0）
安装缺失依赖（如未安装 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 服务未正常关闭

解决方案：

查找占用端口的进程：
```
# Linux/macOS
lsof -i :8080
```
终止占用进程（替换 PID 为实际进程 ID）：
```
kill -9 PID
```
或修改配置文件使用其他端口：
```
{
  "port": "8081"
}
```

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

可能原因：

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

解决方案：

重新构建项目：
```
cd app
./build_js.sh
```
清除浏览器缓存（快捷键 Ctrl+Shift+R 或 Cmd+Shift+R）
重新安装依赖：
```
cd app
rm -rf node_modules
npm install
```

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

可能原因：

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

解决方案：

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

项目结构概览

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

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