该项目是一个基于 React 的交互式图像处理网站，提供超过 50 种图像处理和特效算法，涵盖基础处理、滤镜、艺术效果、颜色处理、复古风格化、几何变换以及纹理特效等多个类别。用户可以通过网页上传图片、选择算法、调整参数，并实时观看算法进度与动画效果。系统还提供每个算法的数学原理、时间复杂度说明和可视化的进度反馈，使学习图像处理原理更加直观。
项目链接(Github):
前端由 React 组件构建，算法实现集中在 src/utils/imageProcessing.js 文件中，使用异步函数和进度回调在主线程之外处理像素，保证界面响应。算法列表通过 getAllAlgorithms 返回，每个条目包含编号、名称和类别；算法选择器根据 algorithmId 调用 getAlgorithmFunction 返回具体处理函数.
快速启动
按照 README 所述，项目使用 Node.js 和 pnpm 作为包管理工具。安装依赖并启动开发服务器的步骤如下：
使用
pnpm i安装依赖。运行
pnpm dev启动本地开发服务器，访问浏览器即可使用。运行
pnpm build可打包生成生产版本。
系统架构
整体架构分为前端界面和算法库两大部分：
前端界面：React 组件负责文件上传、算法选择、参数输入、显示处理进度和结果图像。进度条通过回调持续更新。界面分类菜单按照算法类别组织（基础、滤镜、艺术等）。
算法库：
imageProcessing.js定义了所有算法。每个算法都是异步函数，接收ImageData、算法参数和进度回调，返回处理后的ImageData。进度回调在处理一定像素后触发，用于更新前端进度条。算法映射：通过
getAlgorithmFunction(algorithmId)从映射表取得算法函数；getAllAlgorithms()返回包含所有算法名称、类别的信息
算法分类与映射
项目通过 getAllAlgorithms() 返回完整算法列表，包括编号、名称和类别。算法按以下类别分类：
basic：灰度化、反色、亮度调整、对比度调整、均值模糊、边缘检测、锐化、浮雕。
filter：高斯模糊、运动模糊、径向模糊、中值滤波、双边滤波、拉普拉斯锐化、非锐化掩模、Sobel 边缘增强。
artistic：油画、水彩、铅笔素描、卡通化、马赛克、点彩画、蜡笔、炭笔、版画、抽象艺术。
color：色相偏移、饱和度增强、色彩平衡、单色保留、互补色、色彩量化。
vintage：复古胶片、褪色、暗角、颗粒噪点、高对比度黑白。
geometric：旋转、透视、鱼眼、桶形畸变、波浪变形、漩涡。
texture：浮雕增强、金属质感、玻璃、霓虹发光、阴影投射、纹理叠加。
每个算法都可以通过 algorithmId 在映射表中找到对应的函数，这使得前端可以通过简单的键值对管理多达 50 种处理算法。
