syncfusion-blazor-image-editor

实现 Syncfusion Blazor 图像编辑器组件

Syncfusion Blazor 图像编辑器是一款功能强大、特性丰富的组件，可为 Blazor 应用添加图像编辑功能。它提供了一套完整的工具，用于图像处理、批注、转换和导出，并配有直观的 UI 和丰富的 API。

导航指南

入门

📄 阅读： references/getting-started.md

• 安装 NuGet 包（Syncfusion.Blazor.ImageEditor、Syncfusion.Blazor.Themes）
• 配置 Blazor WebAssembly 和 Web App
• 导入命名空间并注册服务
• 添加样式表和脚本引用
• 渲染基本组件
• 新增： 组件属性（AllowUndoRedo、IsReadOnly、Enabled、Theme、CssClass、EnableImageSmoothing）

核心操作

📄 阅读： references/core-operations.md

• 从文件资源管理器打开/加载图像
• 新增： 完整的 OpenAsync 签名，包含全部 6 个参数（resetChanges、fillColor、width、height、isAspectRatio）
• 保存和导出图像（PNG、JPEG、SVG、WEBP 格式）
• JPEG 导出的图像质量设置
• 使用键盘快捷键执行撤销和重做操作（CanUndoAsync、CanRedoAsync）
• 将图像重置为原始状态
• 新增： 应用和放弃更改、清除图像、获取图像数据的方法

图像转换

📄 阅读： references/image-transformations.md

• 使用自定义、圆形、正方形或比例选区裁剪图像
• 向左、向右旋转图像，或按任意角度旋转
• 水平和垂直翻转
• 使用滑块控件拉直图像
• 新增： 使用 StraightenImageAsync 方法精确调整角度（-45 到 +45 度）
• 将图像调整为指定尺寸
• 在画布内平移图像

批注

📄 阅读： references/annotations.md

• 添加可自定义的文本批注（字体、大小、颜色、粗体、斜体、下划线、删除线）
• 新增： 完整的 DrawTextAsync 参数，包含下划线和删除线选项
• 创建多行文本批注
• 启用带有描边控制的手绘功能
• 绘制形状（矩形、椭圆、箭头、路径、线条）
• 插入图像批注（水印、徽标、装饰元素）
• 新增： 批注 z 顺序管理（BringToFrontAsync、SendToBackAsync、BringForwardAsync、SendBackwardAsync）
• 新增： 使用 CloneShapeAsync 克隆批注
• 新增： 启用/禁用批注模式（EnableActiveAnnotationAsync、DisableActiveAnnotationAsync）
• 新增： 启用文本编辑模式
• 使用 ShapeSettings 和 ID 删除和管理批注

批注样式

📄 阅读： references/annotation-styling.md

• 自定义描边宽度、颜色和填充颜色
• 为文本批注设置字体样式
• 使用 ShapeChanging 事件进行动态自定义
• 配置默认描边颜色和样式
• 使用 ShapeSettings 属性

调整、滤镜和效果

📄 阅读： references/adjustments-filters-effects.md

• 应用微调选项（亮度、对比度、饱和度、色调、模糊等）
• 使用滑块控件预览调整效果
• 为图像应用滤镜（预设效果）
• 为图像添加边框效果
• 应用更改前先提交或预览

遮挡处理

📄 阅读： references/redaction.md 新增

• 绘制遮挡区域并应用模糊或像素化效果
• RedactType 枚举（Blur、Pixelate）
• 控制模糊强度和像素大小
• 获取、选择、更新和删除遮挡区域
• RedactSettings 类属性
• 隐私保护和 GDPR 合规用例

边框

📄 阅读： references/frames.md 新

• 为图像添加装饰性边框
• FrameType 枚举（Mat、Bevel、Line、Inset、Hook）
• 自定义边框颜色、渐变和大小
• 用于 Line 边框的 FrameLineStyle（Solid、Dashed、Dotted）
• 配置内边距、偏移量、边框半径和线条数量
• 专业照片展示示例

事件参考

📄 阅读： references/events-reference.md 新

• 完整的 ImageEditorEvents 文档
• 生命周期事件（Created、Destroyed）
• 文件操作事件（FileOpened、Saving）
• 变换事件（Cropping/Cropped、Rotating/Rotated、Flipping/Flipped）
• 形状事件（ShapeChanging/ShapeChanged、调整大小/拖动开始/结束）
• 调整事件（ImageFiltering/Filtered、FinetuneValueChanging/Changed、FrameChanging/Changed）
• 用户交互事件（Zooming/Zoomed、OnPanStart/End、Clicked）
• 工具栏事件（ToolbarUpdating、ToolbarItemClicked、QuickAccessToolbarOpening）
• 历史记录事件（HistoryChanged）
• 所有事件的事件参数参考

工具栏自定义

📄 阅读： references/toolbar-customization.md

• 内置工具栏项参考（Open、Crop、Rotate、Annotation、Filters 等）
• 添加自定义工具栏项和按钮
• 显示/隐藏整个工具栏或特定项
• 有条件地启用/禁用工具栏项
• 使用 ToolbarUpdating 事件自定义上下文工具栏
• 创建自定义工具栏模板

用户交互

📄 阅读： references/user-interactions.md

• 缩放方法（工具栏按钮、捏合手势、鼠标滚轮、键盘快捷键）
• 在画布上平移/移动图像
• 用于裁剪的选区类型
• 获取图像尺寸和坐标
• 键盘快捷键参考（Ctrl+Z、Ctrl+Y、Ctrl+S 等）

无障碍与本地化

📄 阅读： references/accessibility-localization.md

• WCAG 合规性和无障碍功能
• 键盘导航支持
• 屏幕阅读器兼容性
• ARIA 属性
• 颜色对比度标准
• 本地化和 RTL 支持

设置模式与部署

📄 阅读： references/setup-modes.md

• WebAssembly 应用设置（Visual Studio、VS Code、.NET CLI）
• 使用交互式渲染模式（Auto、WebAssembly、Server）设置 Web 应用
• 主题配置（Bootstrap5、Fluent2、Material3、Tailwind3）
• 静态 Web 资源与 CDN 引用
• 脚本引用和依赖项

快速入门示例

@using Syncfusion.Blazor.ImageEditor

<SfImageEditor @ref="ImageEditor" Height="500px" Width="100%">
    <ImageEditorEvents Created="OnCreated"></ImageEditorEvents>
</SfImageEditor>

@code {
    SfImageEditor ImageEditor;

    private async void OnCreated()
    {
        // Load an image when component is ready
        await ImageEditor.OpenAsync("path/to/image.png");
    }
}

设置步骤：

1. 安装 NuGet 包：Syncfusion.Blazor.ImageEditor 和 Syncfusion.Blazor.Themes
2. 在 _Imports.razor 中添加导入：@using Syncfusion.Blazor.ImageEditor
3. 在 Program.cs 中注册服务：builder.Services.AddSyncfusionBlazor();
4. 将主题样式表添加到 index.html 或 App.razor
5. 添加组件，并在 Created 事件中加载图像

核心功能

功能	用途	参考
图像加载	打开 JPEG、PNG、JPG、WEBP、BMP 文件	core-operations.md
文本注释	添加标签、说明文字、水印，并支持下划线和删除线	annotations.md
形状注释	绘制矩形、椭圆、箭头、路径，并控制 z 顺序	annotations.md
徒手绘制	直接在图像上勾画和绘制	annotations.md
涂抹	使用模糊或像素化隐藏敏感信息，以符合隐私规范	redaction.md
边框	应用装饰性边框（Mat、Bevel、Line、Inset、Hook）	frames.md
裁剪和变换	使用多种选区类型裁剪、旋转、翻转和拉直图像	image-transformations.md
滤镜和效果	应用微调和预设滤镜	adjustments-filters-effects.md
缩放和平移	使用多种缩放方式并平移图像	user-interactions.md
导出	保存为 PNG、JPEG、SVG、WEBP，并控制质量	core-operations.md
撤销/重做	提供完整的操作历史记录	core-operations.md
事件	提供 30 多种生命周期、变换、形状和交互事件	events-reference.md
工具栏	使用内置或自定义工具栏，并支持事件	toolbar-customization.md
无障碍功能	支持键盘导航、屏幕阅读器、RTL 和本地化	accessibility-localization.md

常见模式

模式 1：加载图像并启用注释

<SfImageEditor @ref="ImageEditor" Height="500px">
    <ImageEditorEvents Created="OnCreated"></ImageEditorEvents>
</SfImageEditor>

@code {
    SfImageEditor ImageEditor;
    private string ImageUrl = "YOUR_IMAGE_URL"; 
    
    private async void OnCreated()
    {
        await ImageEditor.OpenAsync(ImageUrl);
    }
    
    private async Task AddTextAnnotation()
    {
        ImageDimension dim = await ImageEditor.GetImageDimensionAsync();
        await ImageEditor.DrawTextAsync(dim.X.Value, dim.Y.Value, "Important", "Arial", 24);
    }
}

模式 2：自定义工具栏

<SfImageEditor @ref="ImageEditor" Toolbar="@CustomToolbar" Height="500px">
    <ImageEditorEvents Created="OnCreated" ToolbarItemClicked="OnToolbarClick"></ImageEditorEvents>
</SfImageEditor>

@code {
    private List<ImageEditorToolbarItemModel> CustomToolbar = new()
    {
        new ImageEditorToolbarItemModel { Name = "Open" },
        new ImageEditorToolbarItemModel { Name = "Crop" },
        new ImageEditorToolbarItemModel { Name = "Annotation" },
        new ImageEditorToolbarItemModel { Name = "Save" }
    };
}

模式 3：导出图像并控制质量

private async Task ExportImage()
{
    // Export as PNG (lossless, default)
    await ImageEditor.ExportAsync("edited-image.png");
    
    // Export as JPEG with quality control (0.0 to 1.0)
    await ImageEditor.ExportAsync("photo.jpg", ImageEditorFileType.JPEG, 0.85);
    
    // Export as WEBP (modern format)
    await ImageEditor.ExportAsync("image.webp", ImageEditorFileType.WEBP);
    
    // Export as SVG (vector format)
    await ImageEditor.ExportAsync("graphic.svg", ImageEditorFileType.SVG);
    
    // Or press Ctrl+S to open export dialog with format selection
}

模式 4：隐私涂抹工作流

<SfImageEditor @ref="ImageEditor" Height="500px">
    <ImageEditorEvents Created="OnCreated"></ImageEditorEvents>
</SfImageEditor>

@code {
    SfImageEditor ImageEditor;
    
    private async Task RedactSensitiveInfo()
    {
        // Draw blur redaction over sensitive areas
        await ImageEditor.DrawRedactAsync(
            RedactType.Blur, 
            startX: 100, startY: 100,
            width: 200, height: 50,
            value: 30  // Blur intensity
        );
        
        // Draw pixelate redaction over other areas
        await ImageEditor.DrawRedactAsync(
            RedactType.Pixelate,
            startX: 400, startY: 200,
            width: 200, height: 50,
            value: 20  // Pixel size
        );
        
        // Export redacted image
        await ImageEditor.ExportAsync("redacted-document.png");
    }
}

模式 5：专业照片装裱

<SfImageEditor @ref="ImageEditor" Height="500px">
    <ImageEditorEvents Created="OnCreated"></ImageEditorEvents>
</SfImageEditor>

@code {
    SfImageEditor ImageEditor;
    
    private async Task ApplyPhotoFrame()
    {
        // Load portrait image
        await ImageEditor.OpenAsync("portrait.jpg");
        
        // Apply classic mat frame with gradient
        await ImageEditor.DrawFrameAsync(
            FrameType.Mat,
            color: "#FFFFFF",
            gradientColor: "#F5F5DC",
            size: 50,
            inset: 20
        );
        
        // Export framed image
        await ImageEditor.ExportAsync("framed-portrait.png");
    }
}

相关技能

• 实现 Blazor 组件 - 主库概览
• 实现轮播组件 - 图像轮播显示
• 实现富文本编辑器 - 文本编辑功能

---

注意： 所有代码示例均使用 Blazor 组件语法。有关适用于特定 Blazor 托管模型（WebAssembly、Web App、Server）的设置说明，请参阅入门指南。