syncfusion-react-image-editor

用途

Syncfusion React Image Editor 是一个用于在 React 应用中直接编辑图像的综合组件。它提供直观界面，集成变换、注释、效果等工具，适合需要在页面内完成图像编辑、标注、修饰或隐私遮挡的场景。

主要能力

多来源打开图像：支持文件路径、URL、base64 字符串、blob，以及从文件上传器、文件管理器和树视图打开。
保存与导出：可导出为 PNG、JPEG、SVG、WEBP，支持控制图像尺寸和宽高比。
选择与裁剪：插入自定义、方形和圆形选择区域；支持 2:3、3:2、3:4、4:3、4:5、5:4、5:7、7:5、9:16、16:9 等宽高比裁剪，可在裁剪时保持原图尺寸，并在调整大小时锁定选区。
变换：按度数顺时针/逆时针旋转，水平/垂直翻转，以及 -45° 到 +45° 的精细矫正，变换可同步应用于注释。
缩放与平移：支持可配置最小/最大缩放系数的放大缩小，放大后或裁剪时平移，缩放可由工具栏、双指、鼠标滚轮或键盘触发。
注释：添加带位置、内容与字体设置的文本（粗体、斜体、下划线、删除线，多行支持）；矩形、椭圆、线条、箭头和路径等形状；自由手绘（可自定义线宽与颜色）；图像或图标注释（可控制位置、尺寸、旋转、透明度并保持宽高比）；水印与装饰元素。
效果：应用预定义滤镜（Chrome、Cold、Warm、灰度、棕褐、反色），微调亮度、对比度、饱和度、色相、曝光、模糊、透明度，并通过滑块实时调整。
撤销重做：支持 16 步历史记录，快捷键 Ctrl+Z、Ctrl+Y。
工具栏：内置 20+ 默认工具，可添加、移除、启用、禁用工具栏项，支持自定义项与事件处理器、注释上下文工具栏以及工具栏模板。快速访问工具栏可用于注释并支持显示/隐藏和自定义项。
图像操作：调整尺寸（可保持或不保持宽高比）、框装饰（Mat、Bevel、Line、Inset、Hook，可自定义颜色、尺寸和线条样式）、Z 轴排序（前移/后移/置顶/置底）、遮挡敏感信息（模糊或像素化，支持选择、更新、删除、获取等操作）。
其它：清除图像、适应宽度/高度、在对话框内渲染、重置图像至原始状态。

使用方式

通过 npm 包 @syncfusion/ej2-react-image-editor 引入 ImageEditorComponent。基本用法是设置 width、height，并在 created 事件中调用 open() 方法加载图像，例如：

import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import React from 'react';

function App() {
  let imgObj: ImageEditorComponent;

  function imageEditorCreated(): void {
    imgObj.open('https://ej2.syncfusion.com/react/documentation/image-editor/images/bridge.jpeg');
  }

  return (
    <div>
      <ImageEditorComponent
        ref={(img) => { imgObj = img }}
        width="550px"
        height="350px"
        created={imageEditorCreated}
      />
    </div>
  );
}

export default App;

常用模式包括：打开+编辑+保存流程（open、变换/注释/效果、export 并可选转换为 base64 或 blob）；响应式工具栏（自定义工具栏项、处理点击事件、按项执行 rotate/zoom/drawText 等方法）；注释工作流（启用注释模式、通过 shapeChanging 自定义、用 deleteShape 删除、用 z-order 方法管理图层）；对话框集成（在 Dialog 内容模板中渲染，通过 fileOpened 加载，关闭前调用 clearImage，通过 export 或 getImageData 获取数据）；滤镜+微调管道（applyImageFilter 与 finetuneImage 结合，监听相关事件组合效果）。

关键属性包括 width、height、toolbar、fontFamily、uploadSettings、zoomSettings、showQuickAccessToolbar、locale。关键事件包括 created、fileOpened、beforeSave、cropping、zooming、rotating、shapeChanging、toolbarUpdating。

适用场景

需要在 React 应用中内嵌图像编辑器的管理后台或内容平台。
对图片添加文字、形状、手绘、水印等注释的协作或审核流程。
对图像进行滤镜与微调，用于展示或内容生产。
对敏感区域进行模糊或像素化遮挡，满足隐私与合规需求。
需要键盘导航、RTL 与多语言支持的国际化项目。

限制

打开支持的格式：PNG、JPEG、JPG、SVG、WEBP、BMP（本地、URL、base64、blob）；导出支持 PNG、JPEG、SVG、WEBP。
可配置允许的文件扩展名和最小/最大文件大小限制，需通过 uploadSettings 设置。
撤销重做历史为 16 步。
安装方式、CSS 导入、主题设置、Vite 与 create-react-app 的集成细节在参考资料中说明，具体步骤暂未在本资料中完整提供。
收费、价格、授权模式等暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制