# web_ps

**Repository Path**: wangchito/web_ps

## Basic Information

- **Project Name**: web_ps
- **Description**: - 基于浏览器的图像编辑应用，支持多图层合成、绘图工具、选区与基础滤镜。
- 纯静态站点，无需后端即可运行，适合 Netlify、GitHub Pages 等平台部署。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-14
- **Last Updated**: 2025-11-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web Photoshop（浏览器版）

在线地址：`https://webps.netlify.app`

## 项目概述

- 基于浏览器的图像编辑应用，支持多图层合成、绘图工具、选区与基础滤镜。
- 纯静态站点，无需后端即可运行，适合 Netlify、GitHub Pages 等平台部署。

## 功能亮点

- 画布与图层：增删、可见性、混合模式（normal/multiply/screen/overlay/soft-light 等）、不透明度。
- 绘图与编辑：画笔（颜色/大小/硬度）、橡皮擦、形状（矩形/椭圆）、文字。
- 选择工具：矩形、套索、魔棒（容差可调），支持羽化/扩展/收缩与选区保存/恢复。
- 滤镜管线：模糊、锐化、色阶；自动选择 WebGL/GPU 或 Web Worker 路径提升性能。
- 文件：图片导入为图层、PNG 导出；PSD 导入占位提示（预留解析接入）。

## 快速开始（本地）

- 启动本地预览（Python）：
  - `python -m http.server 5500`
  - 打开 `http://localhost:5500/`
- 或直接双击 `index.html` 使用本地文件协议（推荐使用本地服务器以确保 Worker/模块路径）。

## 使用指引

- 左侧工具栏：画笔/橡皮擦/选区（矩形/套索/魔棒）/取消选区/形状（矩形/椭圆）/文字。
- 右侧面板：图层（不透明度/混合模式）、工具属性（颜色/大小/硬度/容差/文字/字号）、滤镜（类型和参数）。
- 顶部菜单：新建、导入图片（生成新图层）、导出 PNG。

## 部署

- Netlify：可在 `https://app.netlify.com/drop` 直接拖拽整个项目文件夹或 zip 包，发布目录为项目根。
- GitHub Pages：仓库包含 `.github/workflows/pages.yml`，推送至 `main` 分支后自动发布为静态站点。

## 目录结构

- `index.html`：页面入口与 UI 布局
- `styles.css`：深色主题样式
- `src/app.js`：应用初始化与事件绑定
- `src/engine.js`：图层/合成/历史/选区叠加
- `src/tools.js`：画笔、形状、文字工具
- `src/selection.js`：选区引擎（矩形/套索/魔棒/羽化/扩展/收缩）
- `src/filters.js`：滤镜处理（模糊/锐化/色阶，支持 Worker/GPU）
- `src/glfilters.js`：WebGL 模糊实现
- `src/workers/filterWorker.js`：滤镜 Worker
- `src/fileio.js`：图片导入与 PSD 占位提示

## 兼容与性能

- 浏览器：Chrome/Edge/Firefox/Safari 现代版本；建议启用硬件加速。
- 大图优化：Worker 分块与 WebGL 加速；根据设备性能自动选择路径。

## 后续规划

- 更多混合模式/滤镜（WebGL）、高级选区布尔运算、对象层可视化编辑与拖拽、完整 PSD 解析与适配。