# 图片编辑器

**Repository Path**: personal-projects_best/image-editor

## Basic Information

- **Project Name**: 图片编辑器
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-12
- **Last Updated**: 2026-02-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TOAST UI Image Editor（本地汉化增强版）

<!-- README-AUTO:START -->
文档自动生成于：2026-02-12

## 项目概览

- 类型：Lerna + npm Workspaces 多包仓库
- 核心组件：apps/image-editor（Plain JS）
- 封装：apps/vue-image-editor（Vue）、apps/react-image-editor（React）
- 示例页面：apps/image-editor/examples（含入口页 index.html 与汉化示例）

## 环境要求

- Node.js ≥ 16（建议），npm ≥ 7
- Windows 下已将清理脚本替换为 rimraf，避免 `rm -rf` 兼容问题

## 目录结构（关键）

- apps/
  - image-editor/ 核心库与示例
    - dist/ 构建产物（tui-image-editor.js|.min.js、.css）
    - examples/ 示例（含入口页）
      - index.html 示例入口（新增）
      - example01-includeUi.html 内置 UI 示例（支持中文）
      - example02-useApiDirect.html 直接调用 API 示例（支持上传图片到画布）
      - example03-mobile.html 移动端示例
      - js/locale/zh-CN.js 中文文案字典（新增）
    - webpack.*.config.js 构建与开发配置
  - vue-image-editor/ Vue 封装（Storybook）
  - react-image-editor/ React 封装（Storybook）

## 快速开始

### 安装依赖（根目录）

```bash
npm install
```

### 启动开发服务器（推荐）

```bash
# 在子包
cd apps/image-editor
npm run serve
# 或在根目录（已新增脚本）
npm run serve:image-editor
```

- 默认端口：8080
- 示例入口页：`http://localhost:8080/examples/index.html`

### 访问示例

- 入口页：`/examples/index.html`
- 内置 UI（中文）：`/examples/example01-includeUi.html`
  - 使用中文 locale：见 [zh-CN.js](file:///d:/Projects/个人开发/openCode/tui.image-editor-master/tui.image-editor-master/apps/image-editor/examples/js/locale/zh-CN.js)
- API 直调（上传图标图片到画布）：`/examples/example02-useApiDirect.html`
- 移动端示例：`/examples/example03-mobile.html`

## 构建与产物

### 构建核心包

```bash
# 子包
cd apps/image-editor
npm run build
# 或在根目录
npm run build:image-editor
```

- 输出目录：apps/image-editor/dist
- 文件：
  - 非压缩：tui-image-editor.js、tui-image-editor.css
  - 压缩版：tui-image-editor.min.js、tui-image-editor.min.css
- 参考配置：[webpack.common.config.js](file:///d:/Projects/个人开发/openCode/tui.image-editor-master/tui.image-editor-master/apps/image-editor/webpack.common.config.js#L8-L18)

## 部署指南

### 方案 A：只部署库文件

1. 上传 `apps/image-editor/dist` 到服务器（例如 `/static/tui-image-editor/`）
2. 页面引入：

```html
<link rel="stylesheet" href="/static/tui-image-editor/tui-image-editor.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.js"></script>
<script src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
<script src="/static/tui-image-editor/tui-image-editor.min.js"></script>
```

### 方案 B：部署示例站点

1. 上传 `apps/image-editor/examples` 与 `apps/image-editor/dist`
2. 入口页：`/examples/index.html`（可跳转三个示例）
3. 注意：示例相对引用 `../dist`，部署时保持目录关系一致，或改为绝对路径

### Nginx 示例

```nginx
server {
  listen 80;
  server_name your.domain.com;

  location /examples/ {
    alias /var/www/tui-image-editor/examples/;
    index index.html;
  }
  location /static/tui-image-editor/ {
    alias /var/www/tui-image-editor/dist/;
    add_header Cache-Control "public, max-age=31536000";
  }
}
```

## 使用要点

- 内置 UI 启用中文：在示例 01 中引入 `js/locale/zh-CN.js`，并设置 `includeUI.locale = locale_zh_CN`  
  参考：[example01-includeUi.html](file:///d:/Projects/个人开发/openCode/tui.image-editor-master/tui.image-editor-master/apps/image-editor/examples/example01-includeUi.html#L39-L53)
- 直接 API 使用（示例 02）：
  - “选择图标上传”会弹出文件选择器，选择图片后通过 `addImageObject(imgUrl)` 添加到画布
  - 若希望矢量图标（可通过颜色统一控制），可将位图转为 SVG Path 后调用 `registerIcons` + `addIcon`
- 移动端示例（示例 03）：底部滚动菜单，适合移动端操作

## 常见问题

- Windows 执行 `rm -rf` 报错  
  已改为 `rimraf`，见 [apps/image-editor/package.json](file:///d:/Projects/个人开发/openCode/tui.image-editor-master/tui.image-editor-master/apps/image-editor/package.json#L24-L33)
- `Cannot find module 'stylus'`  
  在根目录安装 `stylus`；建议 Node ≥ 16。  
- dev server 端口  
  示例使用 webpack-dev-server，默认 8080；若冲突可使用 `--port` 指定端口。
- 叠层报错（Unsupported operation / The object is not in canvas）  
  示例交互已增加容错；避免在未选中对象时调用变更操作，移除不存在的滤镜会被忽略。

## 脚本速查

- 根目录：
  - `build`：`lerna run build`
  - `build:image-editor`：仅构建核心包
  - `serve:image-editor`：在根目录启动核心包 dev server
- 核心包（apps/image-editor）：
  - `serve`：启动示例与 dev server
  - `build`：清理 + 生成 SVG + 产物构建（含压缩版）
- Vue/React 封装：
  - `npm run storybook`（在各自包内）启动组件演示

## 重要文件

- 内置 UI 模板与本地化：
  - Locale 类：[locale.js](file:///d:/Projects/个人开发/openCode/tui.image-editor-master/tui.image-editor-master/apps/image-editor/src/js/ui/locale/locale.js)
  - 中文字典：[zh-CN.js](file:///d:/Projects/个人开发/openCode/tui.image-editor-master/tui.image-editor-master/apps/image-editor/examples/js/locale/zh-CN.js)
- 示例入口（新增）：[index.html](file:///d:/Projects/个人开发/openCode/tui.image-editor-master/tui.image-editor-master/apps/image-editor/examples/index.html)
- 构建配置：  
  - 开发：[webpack.dev.config.js](file:///d:/Projects/个人开发/openCode/tui.image-editor-master/tui.image-editor-master/apps/image-editor/webpack.dev.config.js#L4-L11)  
  - 通用：[webpack.common.config.js](file:///d:/Projects/个人开发/openCode/tui.image-editor-master/tui.image-editor-master/apps/image-editor/webpack.common.config.js)

## 许可证与统计

- 许可证：同上游 TOAST UI Image Editor
- `usageStatistics`：默认关闭（示例中为 `false`）；如需开启可设置为 `true`
<!-- README-AUTO:END -->