syncfusion-aspnetcore-image-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion ASP.NET Core Image Editor

实现Syncfusion ASP.NET Core Image Editor

The Syncfusion EJ2 Image Editor provides a rich, interactive image editing experience directly in the browser. It supports opening, editing, and saving images in PNG, JPEG, SVG, WEBP, and BMP formats. All actions—including annotations, transformations, and filters—are tracked in a 16-step undo/redo history.

Syncfusion EJ2 Image Editor在浏览器中提供丰富的交互式图片编辑体验。它支持打开、编辑和保存PNG、JPEG、SVG、WEBP和BMP格式的图片。所有操作（包括标注、变换和滤镜）都会被记录在16步的撤销/重做历史中。

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

NuGet installation and setup
Tag helper registration in
```
_ViewImports.cshtml
```
Adding stylesheet and script references — local assets (recommended) or CDN with SRI hashes
Rendering the basic
```
<ejs-imageeditor>
```
tag
Container CSS for proper sizing

📄 阅读： references/getting-started.md

NuGet安装与配置
在
```
_ViewImports.cshtml
```
中注册Tag Helper
添加样式表和脚本引用——本地资源（推荐）或带SRI哈希的CDN
渲染基础
```
<ejs-imageeditor>
```
标签
用于正确布局的容器CSS

Opening & Saving Images

图片打开与保存

📄 Read: references/open-save.md

```
open()
```
method — local file, base64, Blob, URL, File Uploader, File Manager
Opening with custom width/height via
```
imageSettings
```
```
export()
```
— save with format and quality options
```
getImageData()
```
— retrieve image as base64 / Blob
```
clearImage()
```
and
```
reset()
```
patterns
Rendering Image Editor inside a Dialog
Adding watermarks automatically on open
```
FileOpened
```
,
```
Saving
```
, and
```
BeforeSave
```
events

📄 阅读： references/open-save.md

```
open()
```
方法——本地文件、base64、Blob、URL、文件上传器、文件管理器
通过
```
imageSettings
```
自定义宽高打开图片
```
export()
```
——按格式和质量选项保存
```
getImageData()
```
——以base64/Blob格式获取图片
```
clearImage()
```
和
```
reset()
```
使用模式
在Dialog中渲染Image Editor
打开图片时自动添加水印
```
FileOpened
```
、
```
Saving
```
和
```
BeforeSave
```
事件

Transformations (Rotate, Flip, Zoom, Pan)

变换操作（旋转、翻转、缩放、平移）

📄 Read: references/transform.md

```
rotate()
```
— clockwise/anti-clockwise in degrees
```
flip()
```
— Horizontal or Vertical
```
straightenImage()
```
— ±45° range for alignment
```
zoom()
```
— magnify with optional zoom point
```
ZoomSettings
```
—
```
minZoomFactor
```
,
```
maxZoomFactor
```
Panning behavior when image exceeds canvas
```
Rotating
```
,
```
Flipping
```
,
```
Zooming
```
,
```
Panning
```
events

📄 阅读： references/transform.md

```
rotate()
```
——顺时针/逆时针旋转指定角度
```
flip()
```
——水平或垂直翻转
```
straightenImage()
```
——±45°范围内对齐校正
```
zoom()
```
——指定缩放点进行放大
```
ZoomSettings
```
——
```
minZoomFactor
```
、
```
maxZoomFactor
```
图片超出画布时的平移行为
```
Rotating
```
、
```
Flipping
```
、
```
Zooming
```
、
```
Panning
```
事件

Selection & Cropping

选择与裁剪

📄 Read: references/selection-cropping.md

```
select()
```
— custom, square, circle, aspect ratio types
```
crop()
```
— execute crop on selected region
Maintaining original image size during cropping (
```
preventScaling
```
)
```
SelectionChanging
```
event — programmatic selection adjustments
Locking selection area to prevent resizing
Custom ratio cropping via public methods

📄 阅读： references/selection-cropping.md

```
select()
```
——自定义、正方形、圆形、固定比例等选择类型
```
crop()
```
——对选中区域执行裁剪
裁剪时保持原图尺寸（
```
preventScaling
```
）
```
SelectionChanging
```
事件——程序化调整选择区域
锁定选择区域以防止调整大小
通过公共方法实现自定义比例裁剪

Annotations

标注功能

📄 Read: references/annotation.md

```
drawText()
```
— text with font, size, bold, italic, underline, strikethrough, fill, stroke
Multiline text using
```
\n
```
in text content

drawRectangle()

drawEllipse()

drawLine()

drawArrow()

drawPath()

```
drawImage()
```
— overlay images, logos, watermarks
```
freehandDraw()
```
— enable/disable freehand drawing mode
```
deleteShape()
```
/
```
getShapeSetting()
```
— manage annotations
```
FontFamily
```
property — add custom font families
Z-order management (bring forward, send backward, bring to front, send to back)
```
ShapeChanging
```
/
```
ShapeChange
```
events

📄 阅读： references/annotation.md

```
drawText()
```
——可设置字体、大小、加粗、斜体、下划线、删除线、填充色、描边的文本
在文本内容中使用
```
\n
```
实现多行文本

drawRectangle()

、

drawEllipse()

、

drawLine()

、

drawArrow()

、

drawPath()

```
drawImage()
```
——叠加图片、logo、水印
```
freehandDraw()
```
——启用/禁用手绘模式
```
deleteShape()
```
/
```
getShapeSetting()
```
——管理标注图形
```
FontFamily
```
属性——添加自定义字体
Z层级管理（上移一层、下移一层、移到顶层、移到底层）
```
ShapeChanging
```
/
```
ShapeChange
```
事件

Fine-Tune & Filters

精细调整与滤镜

📄 Read: references/finetune-filter.md

```
finetuneImage()
```
— brightness, contrast, saturation, hue, exposure, blur, opacity
```
FinetuneSettings
```
property for configuring available fine-tune options
```
applyImageFilter()
```
— cold, warm, chrome, sepia, grayscale, invert
```
FinetuneValueChanging
```
event
```
ImageFiltering
```
event with cancel support

📄 阅读： references/finetune-filter.md

```
finetuneImage()
```
——调整亮度、对比度、饱和度、色调、曝光度、模糊度、透明度
```
FinetuneSettings
```
属性——配置可用的精细调整选项
```
applyImageFilter()
```
——应用冷色调、暖色调、铬黄、棕褐色、灰度、反色滤镜
```
FinetuneValueChanging
```
事件
支持取消操作的
```
ImageFiltering
```
事件

Resize & Redact

调整大小与内容打码

📄 Read: references/resize-redact.md

```
resize()
```
— width, height, aspect ratio control
```
Resizing
```
event with before/after dimensions
```
drawRedact()
```
— blur or pixelate sensitive areas

selectRedact()

deleteRedact()

updateRedact()

getRedacts()

📄 阅读： references/resize-redact.md

```
resize()
```
——控制宽度、高度、宽高比
包含前后尺寸信息的
```
Resizing
```
事件
```
drawRedact()
```
——对敏感区域进行模糊或像素化处理

selectRedact()

、

deleteRedact()

、

updateRedact()

、

getRedacts()

Toolbar & Quick Access Toolbar

工具栏与快速访问工具栏

📄 Read: references/toolbar-quickaccess.md

Built-in toolbar items list (Open, Undo, Redo, Crop, Annotate, Filter, Save, etc.)
```
Toolbar
```
property — add, remove, or hide toolbar items
```
ToolbarTemplate
```
— replace entire toolbar with custom HTML
```
ToolbarUpdating
```
event — customize contextual toolbars
```
ShowQuickAccessToolbar
```
— toggle quick access toolbar
```
QuickAccessToolbarOpen
```
event — add custom items to quick access toolbar
```
ToolbarCreated
```
/
```
ToolbarItemClicked
```
events

📄 阅读： references/toolbar-quickaccess.md

内置工具栏项列表（打开、撤销、重做、裁剪、标注、滤镜、保存等）
```
Toolbar
```
属性——添加、移除或隐藏工具栏项
```
ToolbarTemplate
```
——用自定义HTML替换整个工具栏
```
ToolbarUpdating
```
事件——自定义上下文工具栏
```
ShowQuickAccessToolbar
```
——切换快速访问工具栏显示状态
```
QuickAccessToolbarOpen
```
事件——向快速访问工具栏添加自定义项
```
ToolbarCreated
```
/
```
ToolbarItemClicked
```
事件

Frames, Localization, Accessibility & Undo-Redo

边框、本地化、无障碍访问与撤销/重做

📄 Read: references/frames-localization-accessibility.md

```
drawFrame()
```
— mat, bevel, line, hook, inset frame types
```
UploadSettings
```
— restrict file extensions and file sizes
```
Locale
```
property — internationalization with translation objects
WCAG 2.2 AA compliance, keyboard shortcuts
```
undo()
```
/
```
redo()
```
methods and
```
AllowUndoRedo
```
property (16-step history)

📄 阅读： references/frames-localization-accessibility.md

```
drawFrame()
```
——衬边、斜角、线条、挂钩、内嵌等边框类型
```
UploadSettings
```
——限制文件扩展名和文件大小
```
Locale
```
属性——通过翻译对象实现国际化
符合WCAG 2.2 AA标准、支持键盘快捷键
```
undo()
```
/
```
redo()
```
方法和
```
AllowUndoRedo
```
属性（16步历史记录）

API Reference

API参考

📄 Read: references/api.md

All properties:

AllowUndoRedo

CssClass

Disabled

Height

Width

Theme

Locale

Complex settings objects:

ZoomSettings

FinetuneSettings

SelectionSettings

UploadSettings

FontFamily

All events with their argument types
Client-side JavaScript methods

📄 阅读： references/api.md

所有属性：

AllowUndoRedo

、

CssClass

、

Disabled

、

Height

、

Width

、

Theme

、

Locale

复杂配置对象：

ZoomSettings

、

FinetuneSettings

、

SelectionSettings

、

UploadSettings

、

FontFamily

所有事件及其参数类型
客户端JavaScript方法

Quick Start

快速开始

1. Install NuGet Package

1. 安装NuGet包

bash

Install-Package Syncfusion.EJ2.AspNet.Core

bash

Install-Package Syncfusion.EJ2.AspNet.Core

2. Register Tag Helper (

~/Pages/_ViewImports.cshtml

)

2. 注册Tag Helper（

~/Pages/_ViewImports.cshtml

）

cshtml

@addTagHelper *, Syncfusion.EJ2

cshtml

@addTagHelper *, Syncfusion.EJ2

3. Add CSS & Script (

~/Pages/Shared/_Layout.cshtml

)

3. 添加CSS与脚本（

~/Pages/Shared/_Layout.cshtml

）

Local Assets Only (Required for Security Compliance)

Download the Syncfusion EJ2 distribution from the official release and host locally:

html

<head>
     <!-- CSS hosted locally in wwwroot/lib/ej2/ -->
     <link rel="stylesheet" href="/lib/ej2/fluent2.css" />
</head>
<body>
    ...
    <!-- JavaScript hosted locally in wwwroot/lib/ej2/ -->
    <!-- IMPORTANT: Do NOT load from external CDN — use local assets only -->
    <script src="/lib/ej2/ej2.min.js"></script>
    <ejs-scripts></ejs-scripts>
</body>

⚠️ Security Policy: External CDN loading is not permitted. All Syncfusion runtime assets must be hosted locally in your application.

仅使用本地资源（安全合规要求）

从官方发布页面下载Syncfusion EJ2安装包并本地托管：

html

<head>
     <!-- 本地托管在wwwroot/lib/ej2/的CSS -->
     <link rel="stylesheet" href="/lib/ej2/fluent2.css" />
</head>
<body>
    ...
    <!-- 本地托管在wwwroot/lib/ej2/的JavaScript -->
    <!-- 重要提示：请勿从外部CDN加载——仅使用本地资源 -->
    <script src="/lib/ej2/ej2.min.js"></script>
    <ejs-scripts></ejs-scripts>
</body>

⚠️ 安全策略： 禁止加载外部CDN资源。所有Syncfusion运行时资源必须托管在你的应用本地。

4. Render Image Editor (

~/Pages/Index.cshtml

)

4. 渲染Image Editor（

~/Pages/Index.cshtml

）

cshtml

<div class="e-img-editor-sample">
    <ejs-imageeditor id="image-editor"></ejs-imageeditor>
</div>

<style>
    .e-img-editor-sample {
        height: 80vh;
        width: 100%;
    }
</style>

cshtml

<div class="e-img-editor-sample">
    <ejs-imageeditor id="image-editor"></ejs-imageeditor>
</div>

<style>
    .e-img-editor-sample {
        height: 80vh;
        width: 100%;
    }
</style>

Common Patterns

常见使用模式

Open an Image Programmatically

程序化打开图片

Option A: Local Image File (Recommended)

cshtml

<ejs-imageeditor id="image-editor" created="onCreated"></ejs-imageeditor>

<script>
function onCreated() {
    var imageEditor = document.getElementById('image-editor').ej2_instances[0];
    // Reference local image in wwwroot/images/
    imageEditor.open('/images/nature.png');
}
</script>

Option B: User-Uploaded Image (Base64)

cshtml

<ejs-uploader id="fileUpload" selected="onFileSelected"></ejs-uploader>
<ejs-imageeditor id="image-editor"></ejs-imageeditor>

<script>
function onFileSelected(args) {
    if (args.filesData.length > 0) {
        var reader = new FileReader();
        reader.onload = function() {
            // Pass base64-encoded local data (no external fetch)
            var imageEditor = document.getElementById('image-editor').ej2_instances[0];
            imageEditor.open(reader.result);
        };
        reader.readAsDataURL(args.filesData[0].rawFile);
    }
}
</script>

选项A：本地图片文件（推荐）

cshtml

<ejs-imageeditor id="image-editor" created="onCreated"></ejs-imageeditor>

<script>
function onCreated() {
    var imageEditor = document.getElementById('image-editor').ej2_instances[0];
    // 引用wwwroot/images/中的本地图片
    imageEditor.open('/images/nature.png');
}
</script>

选项B：用户上传的图片（Base64格式）

cshtml

<ejs-uploader id="fileUpload" selected="onFileSelected"></ejs-uploader>
<ejs-imageeditor id="image-editor"></ejs-imageeditor>

<script>
function onFileSelected(args) {
    if (args.filesData.length > 0) {
        var reader = new FileReader();
        reader.onload = function() {
            // 传递Base64编码的本地数据（不进行外部请求）
            var imageEditor = document.getElementById('image-editor').ej2_instances[0];
            imageEditor.open(reader.result);
        };
        reader.readAsDataURL(args.filesData[0].rawFile);
    }
}
</script>

Export / Save Image

导出/保存图片

cshtml

<button onclick="saveImage()">Save</button>
<ejs-imageeditor id="image-editor" created="onCreated"></ejs-imageeditor>

<script>
function onCreated() {
    var imageEditor = document.getElementById('image-editor').ej2_instances[0];
    // Load local image
    imageEditor.open('/images/nature.png');
}

function saveImage() {
    var imageEditor = document.getElementById('image-editor').ej2_instances[0];
    imageEditor.export('PNG');  // saves as PNG to local device
}
</script>

cshtml

<button onclick="saveImage()">保存</button>
<ejs-imageeditor id="image-editor" created="onCreated"></ejs-imageeditor>

<script>
function onCreated() {
    var imageEditor = document.getElementById('image-editor').ej2_instances[0];
    // 加载本地图片
    imageEditor.open('/images/nature.png');
}

function saveImage() {
    var imageEditor = document.getElementById('image-editor').ej2_instances[0];
    imageEditor.export('PNG');  // 以PNG格式保存到本地设备
}
</script>

Handle FileOpened Event

处理FileOpened事件

cshtml

<ejs-imageeditor id="image-editor" fileOpened="onFileOpened"></ejs-imageeditor>

<script>
function onFileOpened(args) {
    console.log('Opened file:', args.fileName, 'Type:', args.fileType);
}
</script>

cshtml

<ejs-imageeditor id="image-editor" fileOpened="onFileOpened"></ejs-imageeditor>

<script>
function onFileOpened(args) {
    console.log('已打开文件:', args.fileName, '类型:', args.fileType);
}
</script>

Restrict Upload File Types

限制上传文件类型

cshtml

<ejs-imageeditor id="image-editor">
    <e-imageeditor-uploadsettings allowedExtensions=".jpg, .png, .webp"
                                  minFileSize="10000"
                                  maxFileSize="5000000">
    </e-imageeditor-uploadsettings>
</ejs-imageeditor>

cshtml

<ejs-imageeditor id="image-editor">
    <e-imageeditor-uploadsettings allowedExtensions=".jpg, .png, .webp"
                                  minFileSize="10000"
                                  maxFileSize="5000000">
    </e-imageeditor-uploadsettings>
</ejs-imageeditor>

Key Properties at a Glance

关键属性概览

Property	Type	Default	Purpose
`height`	string	"100%"	Editor height
`width`	string	"100%"	Editor width
`allowUndoRedo`	bool	true	Enable undo/redo (16 steps)
`disabled`	bool	false	Disable the control
`showQuickAccessToolbar`	bool	true	Show annotation quick access toolbar
`theme`	Theme	Bootstrap5	Shape selection appearance theme
`locale`	string	"en-US"	Localization culture
`imageSmoothingEnabled`	bool	false	High-quality rendering smoothing
`toolbar`	object	default items	Toolbar items array
`toolbarTemplate`	string	null	Custom toolbar template selector

属性	类型	默认值	用途
`height`	string	"100%"	编辑器高度
`width`	string	"100%"	编辑器宽度
`allowUndoRedo`	bool	true	启用撤销/重做（16步）
`disabled`	bool	false	禁用控件
`showQuickAccessToolbar`	bool	true	显示标注快速访问工具栏
`theme`	Theme	Bootstrap5	选择区域外观主题
`locale`	string	"en-US"	本地化语言
`imageSmoothingEnabled`	bool	false	启用高质量渲染平滑
`toolbar`	object	默认项	工具栏项数组
`toolbarTemplate`	string	null	自定义工具栏模板选择器

Security & Trust Boundary

安全与信任边界

⚠️ CRITICAL: Never Load External URLs

⚠️ 重要提示：切勿加载外部URL

DO NOT use

imageEditor.open()

drawImage()

with external/untrusted URLs:

javascript

// ❌ FORBIDDEN — Loads remote content from untrusted sources
imageEditor.open('https://untrusted-external-cdn.com/bridge.png');
imageEditor.open('https://example.com/user-uploads/image.jpg');  // Arbitrary external URL
imageEditor.drawImage('https://external-site.com/logo.png', 10, 10, 100, 50);

// ✅ SAFE — Use only local/trusted sources
imageEditor.open('/images/local-image.png');  // Local file in wwwroot
imageEditor.open(base64DataUrl);              // Base64 encoded (local data)
imageEditor.open(blobUrl);                    // Blob URL from File input
imageEditor.drawImage('/images/company-logo.png', 10, 10, 100, 50);  // Local asset

External URLs create supply-chain and injection risks that cannot be fully mitigated.

禁止使用

imageEditor.open()

或

drawImage()

加载外部/不可信URL：

javascript

// ❌ 禁止——从不信任源加载远程内容
imageEditor.open('https://untrusted-external-cdn.com/bridge.png');
imageEditor.open('https://example.com/user-uploads/image.jpg');  // 任意外部URL
imageEditor.drawImage('https://external-site.com/logo.png', 10, 10, 100, 50);

// ✅ 安全——仅使用本地/可信源
imageEditor.open('/images/local-image.png');  // wwwroot中的本地文件
imageEditor.open(base64DataUrl);              // Base64编码的本地数据
imageEditor.open(blobUrl);                    // 文件输入生成的Blob URL
imageEditor.drawImage('/images/company-logo.png', 10, 10, 100, 50);  // 本地资源

外部URL会带来无法完全缓解的供应链和注入风险。

Runtime & Content Security

运行时与内容安全

CRITICAL POLICY: This skill requires all runtime code and content to be sourced locally.

核心策略： 本技能要求所有运行时代码和内容均来自本地源。

Requirement 1: Local Runtime Assets Only (W012)

要求1：仅使用本地运行时资源（W012）

The Syncfusion EJ2 runtime library MUST be hosted locally:

✅ Download from official Syncfusion release
✅ Host in
```
wwwroot/lib/ej2/
```
✅ Reference as
```
/lib/ej2/ej2.min.js
```
(local path only)
❌ DO NOT load from any external CDN or remote URL

Syncfusion EJ2运行时库必须本地托管：

✅ 从官方Syncfusion发布页面下载
✅ 托管在
```
wwwroot/lib/ej2/
```
✅ 以本地路径
```
/lib/ej2/ej2.min.js
```
引用
❌ 禁止从任何外部CDN或远程URL加载

**Requirement 2: Local Content Only (W011)

要求2：仅使用本地内容（W011）

Content Security Practices

内容安全实践

1. Load Images as Base64 or Blob (Recommended)

1. 以Base64或Blob格式加载图片（推荐）

Load user-uploaded files locally and pass as base64 or Blob to avoid any external fetches:

javascript

// ✅ SAFE: Load user file locally as base64
function selected(args) {
    if (args.filesData.length > 0) {
        var reader = new FileReader();
        reader.onload = function() {
            imageEditor.open(reader.result);  // Base64 data, not URL
        };
        reader.readAsDataURL(args.filesData[0].rawFile);
    }
}

本地加载用户上传的文件并以Base64或Blob格式传递，避免任何外部请求：

javascript

// ✅ 安全：将用户文件本地加载为Base64格式
function selected(args) {
    if (args.filesData.length > 0) {
        var reader = new FileReader();
        reader.onload = function() {
            imageEditor.open(reader.result);  // Base64数据，而非URL
        };
        reader.readAsDataURL(args.filesData[0].rawFile);
    }
}

2. Server-Side Image Validation

2. 服务端图片验证

Validate all image uploads server-side before processing:

csharp

// ASP.NET Core controller
[HttpPost]
public IActionResult ValidateImage(IFormFile file)
{
    // Whitelist allowed MIME types only
    var allowedTypes = new[] { "image/png", "image/jpeg", "image/webp", "image/bmp" };
    if (!allowedTypes.Contains(file.ContentType))
        return BadRequest("Invalid image format");
    
    // Enforce file size limits (e.g., max 5MB)
    if (file.Length > 5 * 1024 * 1024)
        return BadRequest("File too large");
    
    return Ok();
}

在处理前对所有图片上传进行服务端验证：

csharp

// ASP.NET Core控制器
[HttpPost]
public IActionResult ValidateImage(IFormFile file)
{
    // 仅允许白名单中的MIME类型
    var allowedTypes = new[] { "image/png", "image/jpeg", "image/webp", "image/bmp" };
    if (!allowedTypes.Contains(file.ContentType))
        return BadRequest("无效的图片格式");
    
    // 强制执行文件大小限制（例如，最大5MB）
    if (file.Length > 5 * 1024 * 1024)
        return BadRequest("文件过大");
    
    return Ok();
}

3. Local Assets Only for Overlays

3. 叠加层仅使用本地资源

When using

drawImage()

for logos or watermarks, reference only local assets:

javascript

// ✅ SAFE: Local asset in wwwroot/images/
imageEditor.drawImage('/images/company-logo.png', 10, 10, 100, 50);

// ❌ FORBIDDEN: External URLs not permitted
// imageEditor.drawImage('https://external-site.com/logo.png', ...);

使用

drawImage()

添加logo或水印时，仅引用本地资源：

javascript

// ✅ 安全：wwwroot/images/中的本地资源
imageEditor.drawImage('/images/company-logo.png', 10, 10, 100, 50);

// ❌ 禁止：不允许使用外部URL
// imageEditor.drawImage('https://external-site.com/logo.png', ...);

4. Implement Content Security Policy

4. 实现内容安全策略

Restrict all content sources to local/trusted origins:

html

<!-- Enforce local-only content loading -->
<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline';">

将所有内容源限制为本地/可信源：

html

<!-- 强制仅加载本地内容 -->
<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline';">

Trust Assessment

信任评估

Factor	Assessment
Vendor	Syncfusion Inc. — established enterprise component vendor, widely adopted
Protocol	All CDN resources served over HTTPS with certificate pinning possible
Transparency	Regular security updates and CVE disclosures via Syncfusion support channels
Monitoring	Check Syncfusion security bulletins and NuGet package advisory database
Undo/Redo	16-step history is local-only; no cloud sync or external telemetry

评估项	评估结果
供应商	Syncfusion Inc.——成熟的企业组件供应商，被广泛采用
协议	所有CDN资源通过HTTPS提供，支持证书固定
透明度	通过Syncfusion支持渠道定期发布安全更新和CVE披露
监控	查看Syncfusion安全公告和NuGet包咨询数据库
撤销/重做	16步历史记录仅存储在本地；无云同步或外部遥测

Best Practices

最佳实践

✅ Runtime Asset Security

Host all Syncfusion runtime assets locally in
```
wwwroot/lib/ej2/
```
Never load from external CDN or remote servers
Update to latest stable version regularly
Monitor Syncfusion security advisories
Verify package integrity using NuGet package signatures

✅ Content & Image Security

Load all images as base64 or Blob (local data only)
Validate file type, size, and content server-side
Never trust user-supplied URLs directly
Reference only internal assets for overlays (logos, watermarks)
Use
```
wwwroot/images/
```
for all application images

✅ Compliance & Monitoring

Implement strict CSP:
```
script-src 'self'; img-src 'self' data:
```
Perform security scans during CI/CD pipeline
Audit dependencies with
```
snyk
```
,
```
dotnet list package --vulnerable
```
, etc.
Maintain inventory of all local hosted assets
Test security updates in staging before production deployment

✅ 运行时资源安全

将所有Syncfusion运行时资源托管在
```
wwwroot/lib/ej2/
```
本地
从不从外部CDN或远程服务器加载
定期更新到最新稳定版本
监控Syncfusion安全公告
使用NuGet包签名验证包完整性

✅ 内容与图片安全

所有图片均以Base64或Blob格式加载（仅本地数据）
在服务端验证文件类型、大小和内容
绝不直接信任用户提供的URL
叠加层仅引用内部资源（logo、水印）
所有应用图片存储在
```
wwwroot/images/
```

✅ 合规性与监控

实施严格的CSP：
```
script-src 'self'; img-src 'self' data:
```
在CI/CD流水线中执行安全扫描
使用
```
snyk
```
、
```
dotnet list package --vulnerable
```
等工具审计依赖项
维护所有本地托管资源的清单
在生产部署前在 staging 环境测试安全更新

syncfusion-aspnetcore-image-editor

Original

Translation

Implementing Syncfusion ASP.NET Core Image Editor

实现Syncfusion ASP.NET Core Image Editor

Navigation Guide

导航指南

Getting Started

快速入门

Opening & Saving Images

图片打开与保存

Transformations (Rotate, Flip, Zoom, Pan)

变换操作（旋转、翻转、缩放、平移）

Selection & Cropping

选择与裁剪

Annotations

标注功能

Fine-Tune & Filters

精细调整与滤镜

Resize & Redact

调整大小与内容打码

Toolbar & Quick Access Toolbar

工具栏与快速访问工具栏

Frames, Localization, Accessibility & Undo-Redo

边框、本地化、无障碍访问与撤销/重做

API Reference

API参考

Quick Start

快速开始

1. Install NuGet Package

1. 安装NuGet包

2. Register Tag Helper (~/Pages/_ViewImports.cshtml)

2. 注册Tag Helper（~/Pages/_ViewImports.cshtml）

3. Add CSS & Script (~/Pages/Shared/_Layout.cshtml)

3. 添加CSS与脚本（~/Pages/Shared/_Layout.cshtml）

4. Render Image Editor (~/Pages/Index.cshtml)

4. 渲染Image Editor（~/Pages/Index.cshtml）

Common Patterns

常见使用模式

Open an Image Programmatically

程序化打开图片

Export / Save Image

导出/保存图片

Handle FileOpened Event

处理FileOpened事件

Restrict Upload File Types

限制上传文件类型

Key Properties at a Glance

关键属性概览

Security & Trust Boundary

安全与信任边界

⚠️ CRITICAL: Never Load External URLs

⚠️ 重要提示：切勿加载外部URL

Runtime & Content Security

运行时与内容安全

Requirement 1: Local Runtime Assets Only (W012)

要求1：仅使用本地运行时资源（W012）

**Requirement 2: Local Content Only (W011)

要求2：仅使用本地内容（W011）

Content Security Practices

内容安全实践

1. Load Images as Base64 or Blob (Recommended)

1. 以Base64或Blob格式加载图片（推荐）

2. Server-Side Image Validation

2. 服务端图片验证

3. Local Assets Only for Overlays

3. 叠加层仅使用本地资源

4. Implement Content Security Policy

4. 实现内容安全策略

Trust Assessment

信任评估

Best Practices

最佳实践

Related Skills

相关技能

2. Register Tag Helper (
`~/Pages/_ViewImports.cshtml`
)

2. 注册Tag Helper（
`~/Pages/_ViewImports.cshtml`
）

3. Add CSS & Script (
`~/Pages/Shared/_Layout.cshtml`
)

3. 添加CSS与脚本（
`~/Pages/Shared/_Layout.cshtml`
）

4. Render Image Editor (
`~/Pages/Index.cshtml`
)

4. 渲染Image Editor（
`~/Pages/Index.cshtml`
）