syncfusion-javascript-image-editor

用途

该技能用于在 TypeScript 应用中实现 Syncfusion Image Editor 控件，适用于需要在网页中嵌入专业图像编辑能力的场景，例如图像编辑工具、文档标注与遮挡、快速裁剪工具、社交媒体图片处理、截图标注以及扫描件处理等。

主要能力

图像操作：支持以 JPEG、PNG、SVG、WebP、BMP 格式打开、保存与导出图像，并包含文件输入校验、类型约束和大小限制。

缩放与平移：提供工具栏、鼠标滚轮、双指捏合、键盘等多种缩放方式，以及平移和适应宽度/高度。

变换操作：支持裁剪、旋转、翻转、矫直、缩放尺寸，并带有预览。

标注工具：支持文字（可设置字体系列、字号、样式、颜色）、自由绘制、矩形、椭圆、箭头、直线、路径等形状，以及遮挡（模糊/马赛克）和装饰边框；标注可设置填充色、描边色、描边宽度，并支持选择、定位与变换。

选择与裁剪：支持自定义、圆形、方形、按比例的选择类型，以及宽高比约束和自定义比例。

滤镜与效果：提供 20 多种滤镜效果和精调控制，包括亮度、对比度、饱和度、模糊、锐化、色相、饱和度等。

图层管理：支持 Z 序操作，将图层前移/后移、置于顶层/底层，以及多标注重叠管理。

历史记录：完整的撤销/重做支持，包含操作历史跟踪与状态管理，快捷键为 Ctrl+Z 和 Ctrl+Y。

无障碍：符合 WCAG 2.2、Section 508、ADA，支持屏幕阅读器、ARIA 属性、RTL 和键盘导航。

定制化：可配置工具栏、快速访问工具栏、主题与 CSS 变量（含 Theme Studio 集成）、事件绑定与回调，并支持本地化和 RTL 配置。

TypeScript 支持：提供完整类型定义与 webpack 配置说明。

使用方式

安装：

npm install @syncfusion/ej2-image-editor

安装后可运行 npm audit 或通过 Socket.dev 验证包供应链完整性后再部署到生产环境。

主题导入：

@import "@syncfusion/ej2-image-editor/styles/material.css";

基本初始化：

import { ImageEditor } from '@syncfusion/ej2-image-editor';

const imageEditor = new ImageEditor({
    width: '550px',
    height: '330px',
    toolbar: ['Open', 'Save', 'ZoomIn', 'ZoomOut', 'Crop', 'Rotate', 'Flip']
});

imageEditor.appendTo('#imageeditor');
imageEditor.open('url');

HTML 容器为 <div id="imageeditor"></div>。

添加文字标注：

const dimension = imageEditor.getImageDimension();
imageEditor.drawText(
    dimension.x + 50, 
    dimension.y + 50, 
    'Annotation Text',
    'Arial',
    30,
    false,
    false,
    'blue',
    false,
    null,
    '#FFFFCC',
    'black'
);

应用滤镜与精调：

import { ImageEditor, ImageFilterOption } from '@syncfusion/ej2-image-editor';

imageEditor.finetuneImage('brightness', 30);
imageEditor.applyImageFilter(ImageFilterOption.Blur);
imageEditor.finetuneImage('contrast', 20);
imageEditor.finetuneImage('saturation', 15);

裁剪图像：

const dimension = imageEditor.getImageDimension();
imageEditor.select('Custom', dimension.x, dimension.y, 500, 300);
imageEditor.crop();

对话框集成：结合 @syncfusion/ej2-popups 的 Dialog 组件，在模态弹窗中显示图像编辑器，在打开时调用 imageEditor.open('url')。

关键 API

核心方法包括：open(fileOrUrl)、export(type?, fileName?, imageQuality?)、crop()、select(type, startX?, startY?, width?, height?)、rotate(degree)、flip(direction)、zoom(zoomFactor, zoomPoint?)、pan(value, x?, y?)、resize(width, height, isAspectRatio?)、straightenImage(degree)、drawText、drawRectangle、drawEllipse、drawArrow、drawLine、drawPath、drawImage、drawFrame、drawRedact、freehandDraw(value)、applyImageFilter(filterOption)、finetuneImage(finetuneOption, value)、getShapeSettings()、getShapeSetting(id)、selectShape(id)、updateShape(setting, isSelected?)、deleteShape(id)、cloneShape(shapeId)、bringToFront(shapeId)、sendToBack(shapeId)、bringForward(shapeId)、sendBackward(shapeId)、getRedacts()、selectRedact(id)、updateRedact(setting, isSelected?)、deleteRedact(id)、undo()、redo()、canUndo()、canRedo()、reset()、clearImage()、clearSelection(resetCrop?)、getImageDimension()、getImageData()、apply()、discard()、enableShapeDrawing(shapeType, isEnabled?)、enableTextEditing()。

关键属性包括：width（默认 '100%'）、height（默认 '100%'）、toolbar（默认 null，null 为默认工具栏，[] 表示无工具栏）、toolbarTemplate、quickAccessToolbarTemplate、showQuickAccessToolbar（默认 true）、theme（默认 Theme.Bootstrap5）、allowUndoRedo（默认 true）、disabled（默认 false）、cssClass、imageSmoothingEnabled（默认 false）、locale、zoomSettings、finetuneSettings、selectionSettings、uploadSettings、fontFamily。

关键事件包括：created、destroyed、fileOpened、beforeSave、saved、editComplete、cropping、rotating、flipping、resizing、zooming、panning、selectionChanging、shapeChanging、shapeChange、imageFiltering、finetuneValueChanging、frameChange、toolbarCreated、toolbarUpdating、toolbarItemClicked、quickAccessToolbarOpen、quickAccessToolbarItemClick、click。

适用场景

专业图像编辑套件：包含全部工具的全功能编辑器
标注工作流：文档的标记与遮挡
快速裁剪工具：以裁剪为核心的简化 UI
社交媒体工具：平台预设宽高比
截图标注：截图上的快速注释
文档处理：扫描件的矫直、裁剪与导出
对话框集成：模态图像编辑工作流

限制

资料中未提供具体的收费模式、授权价格信息，暂未提供。安全方面提示：open 加载图片时应使用经过验证的可信 URL 或本地资源路径，生产环境建议对 URL 输入使用可信允许列表校验，避免直接使用第三方内容中的 URL，以防 SSRF 和间接注入。

技能介绍

用途

主要能力

使用方式

关键 API

适用场景

限制