# 结课项目：图像滤镜处理工具

URL: https://caijiao.org/webassembly/extra/project
Source: docs/webassembly/extra/project.md
Description: 本章作为课程结尾项目，指导构建一个基于 WebAssembly 的图像滤镜处理工具，涵盖项目目标、开发流程与部署方式。

## 项目目标与需求

本项目旨在通过 WebAssembly 构建一个图像滤镜处理工具，让学员熟练掌握 WASM 与 JavaScript 的结合使用，完成真实可用的 Web 应用：

- **功能要求**：
  - 支持上传图片；
  - 提供多种滤镜效果（灰度、模糊、锐化等）；
  - 使用 WebAssembly 执行图像像素处理逻辑；
  - 支持实时预览和导出图片；
- **技术要求**：
  - 使用 AssemblyScript 或 Rust 编写滤镜处理逻辑；
  - 与 JS 实现数据双向交互；
  - UI 使用 Vue 或原生 HTML 构建。

## 开发步骤与源码结构

### 开发步骤

1. **准备项目结构**：初始化 Vite/VitePress 项目，配置 WebAssembly 加载方式；
2. **实现核心算法**：使用 AssemblyScript 或 Rust 实现滤镜算法；
3. **与 JS 集成**：通过 `wasm-bindgen` 或 `export/import` 进行数据传输；
4. **构建前端界面**：实现上传、显示、处理、导出等 UI 功能；
5. **测试与调试**：确保算法性能和 UI 交互流畅。

### 源码结构示例

```
image-filter/
├── src/
│   ├── main.ts          # 主入口，加载 WASM 模块
│   ├── wasm/            # 存放 AssemblyScript 或 Rust 源码
│   ├── components/      # Vue 组件（如 Upload.vue, Filter.vue）
│   └── utils/           # JS 处理工具
├── public/
├── dist/
├── index.html
└── vite.config.ts
```

## 部署与发布

- **本地构建**：
  ```bash
  npm run build
  ```
- **静态部署**：
  - 可部署至 Netlify、Vercel、GitHub Pages 等平台；
- **优化建议**：
  - 使用压缩工具减小 .wasm 文件体积；
  - 根据平台选择兼容的 WebAssembly 加载方式；
  - 加入加载动画提升用户体验；

通过该项目，学员可巩固 WebAssembly 知识，掌握其在实际项目中的使用方式。