syncfusion-angular-image-editor

实现 Syncfusion Angular 图像编辑器

Syncfusion Angular 图像编辑器组件提供全面且功能丰富的图像编辑与标注解决方案。开发者可以将专业的图像编辑功能直接集成到 Angular 应用中，支持标注、变换、滤镜等多种编辑操作。

组件概览

图像编辑器是一款功能强大的独立组件，提供：

• 完整的图像编辑工具集，包含 20 多种内置工具
• 灵活的标注系统，支持文本、形状和手绘
• 高级变换功能，包括旋转、翻转、拉直、缩放和平移
• 专业图像滤镜（冷色、暖色、Chrome、棕褐色、反色、灰度等）
• 精细调整控件，用于调整亮度、对比度、饱和度、色调、曝光、模糊和不透明度
• 应用边框，提供多种边框类型和自定义选项
• 脱敏工具，用于隐私保护（模糊和像素化）
• 多种输入/输出选项，包括本地文件、base64、blob、文件上传器和文件管理器
• 丰富的撤销/重做历史记录（最多 16 步）
• 完全可自定义的工具栏，提供上下文选项和快速访问选项
• Z 顺序管理，用于管理标注图层
• 适用于移动设备，支持触控手势（双指缩放）
• 全面的无障碍支持，包括 WCAG 2.2、键盘导航和屏幕阅读器兼容性
• 多语言支持，包含 150 多个本地化关键词

文档与导航指南

开始使用与安装

📄 阅读： references/getting-started.md

• 安装和软件包设置
• 依赖项和模块导入
• 基本组件实现
• CSS 导入和主题配置
• 首次渲染和初始化

标注与绘图

📄 阅读： references/annotations.md

• 带格式设置的文本标注（粗体、斜体、下划线、删除线）
• 多行文本支持
• 字体系列和文本颜色自定义
• 可调整描边的手绘功能
• 形状标注（矩形、椭圆、直线、箭头、路径）
• 图像标注和水印
• 删除和管理标注
• 形状样式和默认值自定义

选择与裁剪

📄 阅读： references/selection-and-cropping.md

• 自定义选择形状
• 方形和圆形选择
• 固定宽高比选择（2:3、3:2、4:3、16:9 等）
• 裁剪所选区域
• 选择事件处理
• 锁定选择区域
• 裁剪时自定义宽高比选择

图像变换

📄 阅读： references/transform.md

• 旋转图像（顺时针/逆时针）
• 水平和垂直翻转
• 微调图像拉直效果
• 放大/缩小并设置最小/最大缩放级别
• 平移功能和事件
• 变换事件处理程序
• 变换键盘快捷键

滤镜与精细调整

📄 阅读： references/filter-and-finetune.md

• 应用图像滤镜（冷色、暖色、Chrome、棕褐色、反色、灰度、黑白）
• 精细调整亮度和对比度
• 调整饱和度级别
• 调整色调
• 曝光控制
• 模糊效果
• 不透明度调整
• 滤镜和精细调整事件处理

应用边框

📄 阅读： references/frames.md

• 边框类型（衬框、斜面、线条、挂钩、内嵌）
• 边框颜色自定义
• 渐变颜色支持
• 边框大小和偏移配置
• 线条类型边框的圆角半径
• 边框线条样式（实线、虚线、点线）
• 边框更改事件

遮盖与隐私

📄 阅读： references/redaction.md

• 绘制遮盖（模糊和像素化类型）
• 自定义遮盖属性
• 选择特定遮盖
• 更新遮盖设置
• 删除遮盖
• 获取遮盖详情

打开与保存操作

📄 阅读： references/open-and-save.md

• 从多个来源打开图像（本地、base64、blob、上传器、文件管理器、树视图）
• 选择格式保存（PNG、JPEG、SVG、WEBP、BMP）
• 控制 JPEG 格式的图像质量
• 导出为不同格式
• 转换为 base64、字节数组和 blob
• 打开或保存时应用水印
• 自定义保存对话框和服务器上传
• 自定义尺寸的图像设置

撤销与重做操作

📄 阅读： references/undo-redo.md

• 实现撤销功能
• 实现重做功能
• 了解历史记录限制（16 步）
• 键盘快捷键（Ctrl+Z、Ctrl+Y）

工具栏自定义

📄 阅读： references/toolbar.md

• 内置工具栏项及其功能
• 添加自定义工具栏项
• 显示/隐藏工具栏
• 启用/禁用特定项
• 自定义上下文工具栏
• 用于完全自定义的工具栏模板
• 工具栏事件（toolbarCreated、toolbarItemClicked、toolbarUpdating）

快捷工具栏

📄 阅读： references/quick-access-toolbar.md

• 控制快捷工具栏的可见性
• 向快捷工具栏添加自定义项
• 自定义特定于注释的操作
• 处理工具栏操作的事件

Z 轴顺序与分层

📄 阅读： references/z-order.md

• 将注释前移
• 将注释后移
• 将注释置于最前
• 将注释置于最后
• 管理多个注释层

无障碍与合规性

📄 阅读： references/accessibility.md

• WCAG 2.2 合规标准
• 键盘快捷键与导航
• 屏幕阅读器支持
• 色彩对比度标准
• 移动设备无障碍支持
• RTL（从右到左）支持

API 参考

📄 阅读： references/api.md

• 完整的属性参考，包含类型和默认值
• 所有方法及其参数和返回类型
• 所有事件及其说明
• 事件参数参考
• 滤镜、微调、形状和边框类型
• 选择形状和导出格式
• 属性和事件的用法示例

本地化

📄 阅读： references/localization.md

• 设置区域配置
• 自定义多种语言的 UI 文本
• 翻译关键词和值
• 支持国际受众

图像限制与验证

📄 阅读： references/image-restrictions.md

• 指定允许的文件扩展名
• 设置最小文件大小限制
• 设置最大文件大小限制
• 验证错误消息
• 上传设置配置

图像缩放

📄 阅读： references/resize.md

• 调整图像尺寸
• 保持纵横比
• 处理缩放事件
• 指定自定义尺寸

最终用户功能

📄 阅读： references/end-user-capabilities.md

• 面向用户的功能和工作流
• 通过 UI 打开图像
• 通过工具栏、捏合、鼠标滚轮和键盘执行缩放操作
• 平移功能
• 基于工具栏的变换
• 创建和编辑注释
• 应用滤镜和微调
• 保存和导出工作流

操作指南

📄 阅读： references/clear-image.md - 清除编辑器状态以便在对话框中重复使用

📄 阅读： references/fit-to-width-height.md - 动态缩放适配

📄 阅读： references/render-in-dialog.md - 模态对话框集成

📄 阅读： references/reset-image.md - 恢复到原始状态

快速入门示例

import { Component } from '@angular/core';
import { ImageEditorModule } from '@syncfusion/ej2-angular-image-editor';

@Component({
  imports: [ImageEditorModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div style="width: 550px; height: 350px;">
      <ejs-imageeditor 
        #imageEditor
        [toolbar]="['Open', 'Undo', 'Redo', 'Crop', 'Annotate', 'Finetune', 'Filter', 'Resize', 'Save', 'Reset']"
      ></ejs-imageeditor>
    </div>
    <button (click)="openImage()">Open Image</button>
  `
})
export class AppComponent {
  @ViewChild('imageEditor') imageEditor: any;

  openImage() {
    this.imageEditor.open('path-to-image.png');
  }

  addAnnotation() {
    this.imageEditor.drawText(50, 50, 'Sample Text', 'Arial', 12, false, false, '#000000');
  }

  rotateImage() {
    this.imageEditor.rotate(90);
  }

  saveImage() {
    this.imageEditor.export('edited-image', 'png');
  }
}

常见模式

模式 1：打开图像并添加注释

// Open image from file
this.imageEditor.open('image.png');

// Add text annotation
this.imageEditor.drawText(100, 100, 'Important', 'Arial', 16, true, false, '#FF0000');

// Add rectangle
this.imageEditor.drawRectangle(50, 50, 200, 150, 2, '#0000FF', '#FFFFFF');

// Add freehand drawing
this.imageEditor.freehandDraw();

模式 2：应用滤镜并进行微调

// Apply filter
this.imageEditor.applyImageFilter('Sepia');

// Fine-tune brightness
this.imageEditor.finetuneImage('Brightness', 50);

// Fine-tune contrast
this.imageEditor.finetuneImage('Contrast', -30);

// Fine-tune saturation
this.imageEditor.finetuneImage('Saturation', 40);

模式 3：裁剪和变换

// Select region for cropping
this.imageEditor.select('Custom', 50, 50, 300, 200);

// Crop the selected region
this.imageEditor.crop();

// Rotate after cropping
this.imageEditor.rotate(90);

// Flip horizontally
this.imageEditor.flip('Horizontal');

模式 4：自定义工具栏

toolbar: [
  'Open',
  'Undo',
  'Redo',
  'Crop',
  'RotateLeft',
  'RotateRight',
  'HorizontalFlip',
  'VerticalFlip',
  'Annotate',
  'Finetune',
  'Filter',
  'Frame',
  'Redact',
  'Resize',
  'Save',
  'Reset'
];

模式 5：以不同格式保存

// Save as PNG (default)
this.imageEditor.export('myImage', 'png');

// Save as JPEG with quality
this.imageEditor.export('myImage', 'jpeg', 90);

// Get base64 data
const base64Data = this.imageEditor.getImageData();

// Save as blob
this.imageEditor.getImageData().then(data => {
  const blob = this.dataURLtoBlob(data);
  // Send to server
});

主要属性和配置

属性	类型	描述	使用场景
toolbar	array	要显示的工具栏项目列表	自定义可见工具
toolbarTemplate	template	整个工具栏的自定义模板	全面重新设计工具栏
uploadSettings	object	文件验证规则（扩展名、大小）	限制上传格式和大小
zoomSettings	object	最小/最大缩放比例配置	控制缩放范围
fontFamily	array	文本的附加字体系列	添加自定义字体
locale	string	UI 文本的语言	支持多语言
height	string/number	组件高度	布局尺寸设置
width	string/number	组件宽度	布局尺寸设置
showQuickAccessToolbar	boolean	显示快速访问工具栏	控制快速工具栏的显示

常见用例

1. 照片编辑应用 - 配备所有工具的全功能图像编辑器
2. 文档注释 - 高亮、标记文档并添加评论
3. 社交媒体内容 - 为图像应用滤镜、边框和文本
4. 隐私保护 - 分享前遮盖敏感信息
5. 头像编辑器 - 裁剪、旋转头像并应用滤镜
6. 房地产房源 - 旋转房产照片、添加边框和注释
7. 反馈与协作 - 为截图添加注释，以便团队沟通
8. 模板设计 - 使用 z-order 对注释分层，创建自定义布局
9. 表单图像采集 - 裁剪、旋转并优化手机摄像头拍摄的图像
10. 添加水印 - 添加文本和图像水印以用于品牌宣传

参考文件

所有详细文档均按功能整理在 references/ 文件夹中。每个参考文件都可独立使用，并深入介绍特定功能。

请参阅各参考文件，了解代码示例、事件处理和高级配置。