当前位置: 首页 > article >正文

Blazor中Syncfusion图像编辑器组件使用方法

       Blazor中Syncfusion图像编辑器组件是一个功能丰富的图像处理工具,支持多种编辑、操作和交互方式,帮助用户高效处理图像。以下是该组件的主要功能总结:

主要功能:

  1. 图像打开与保存
    图像编辑器允许用户通过简单的点击操作打开支持的格式(如JPEG、PNG、JPG)的图像,用户可以使用快捷键(如 Ctrl + O)打开文件,使用 Ctrl + S 保存修改后的图像,确保文件的便捷管理。

  2. 缩放与平移
    图像编辑器支持多种方式进行缩放,包括通过工具栏按钮、鼠标滚轮、触摸设备上的捏合手势及键盘快捷键进行缩放操作(如 Ctrl + 放大,Ctrl + - 缩小)。此外,用户还可以通过拖动图像进行平移,特别是在图像被放大时,便于查看图像的不同区域。

  3. 裁剪与图像变换
    用户可以对图像进行裁剪,选择自定义、圆形、方形或按比例裁剪,并可旋转或翻转图像,以达到所需的效果。裁剪过程中,图像内容及注释将一并调整,确保一致性。

  4. 图像注释与标注
    Blazor 图像编辑器支持多种图形注释,如线条、矩形、箭头、文本及自由绘制等,允许用户在图像上添加标记。注释可以随意调整大小、位置,甚至旋转,同时可以设置颜色、笔画宽度和字体等属性。

  5. 滤镜与微调
    图像编辑器提供了多种滤镜和微调选项,如亮度、对比度、饱和度等,用户可以精细调整图像的视觉效果。此外,用户还可以通过滑块实时查看效果,并通过上下文工具栏应用调整。

  6. 撤销与重做
    编辑过程中,用户可以随时使用 Ctrl + Z 撤销操作,或者通过 Ctrl + Y 重做操作,这为图像编辑提供了极大的灵活性和容错性。

  7. 键盘快捷键
    图像编辑器支持多种键盘快捷键,如撤销(Ctrl + Z)、重做(Ctrl + Y)、保存(Ctrl + S)和打开(Ctrl + O),方便用户通过键盘进行快速操作,提高编辑效率。

  8. 导出与重置
    除了保存修改后的图像,用户还可以重置图像,将其恢复到编辑前的状态。此外,编辑器支持导出图像为不同的文件格式,满足不同的使用需求。

       总体来说,Syncfusion图像编辑器组件具备强大的图像编辑、注释、裁剪、缩放、滤镜等功能,通过灵活的操作方式,极大提升了用户的图像编辑体验。

功能操作

        以下操作适用于最终用户,以下各部分对这些操作进行了简要说明:

1. 打开图片

       要在图像编辑器中打开一张图片,请执行以下步骤:

  1. 点击工具栏左侧的“打开”图标。
  2. 文件资源管理器将仅列出 JPEG、PNG、JPG 格式的文件。
  3. 从文件资源管理器窗口中的图片列表中选择一张图片。

2. 缩放

        图像缩放可以通过以下几种方式进行:

  1. 在工具栏中提供了缩放按钮,用户可以点击这些按钮来放大或缩小图像。该选项在图像打开后才可用。
  2. 对于触摸屏设备,用户可以通过两根手指的捏合手势进行缩放。手指向外拉伸可以放大图像,向内捏合可以缩小图像。
  3. 用户按住 Ctrl 键的同时滚动鼠标滚轮来进行图像的缩放。滚轮向上滚动会放大图像,向下滚动则会缩小图像。
  4. 用户可以使用键盘快捷键来缩放图像。按住 Ctrl 键并按 “+” 键可放大图像,按 “-” 键则可缩小图像。

3. 使用工具栏

  1. 打开图片后,“缩放进/缩放出”选项将被启用。
  2. 使用工具栏上的按钮进行缩放。
5. 使用触摸手势(仅限触摸设备)
  1. 用两根手指触摸并移动来缩放图像。
  2. 使用触摸手势控制图像的缩放。
5. 使用鼠标滚轮
  1. 按住 Ctrl 键并滚动鼠标滚轮来进行缩放。
  2. 鼠标滚轮控制缩放。
6. 使用键盘
  1. 按住 Ctrl 键并按键盘上的“+”键进行放大。
  2. 按住 Ctrl 键并按键盘上的“-”键进行缩小。

7. 平移

        要平移图像,请执行以下步骤:

  1. 点击图像并拖动以移动或平移图像。
  2. 平移选项将在以下两种情况下启用:
    • 如果应用了裁剪选择。
    • 如果图像在缩放时超过了画布的大小。

8. 裁剪和图像变换

       要裁剪图像,请执行以下步骤:

  1. 裁剪操作基于在图像编辑器中的选择。
  2. 点击工具栏中的裁剪按钮,打开上下文工具栏,显示裁剪选择选项、旋转选项和翻转选项。
  3. 点击裁剪选择按钮,从弹出的菜单中选择自定义、圆形、方形或比例选择等裁剪类型。
  4. 选择完成后,平移图像以获取裁剪区域。
  5. 使用旋转或翻转按钮执行图像变换,包括任何插入的注释。
  6. 确定裁剪区域后,点击工具栏右上角的勾选图标裁剪图像。

9. 图像注释

       要为图像添加注释,请执行以下步骤:

  1. 点击工具栏中的注释按钮,选择要插入到图像编辑器中的注释类型,如线条、矩形、椭圆、路径、箭头、文本或自由绘制。
  2. 注释添加到图像后,可以通过点击并拖动注释来重新定位,或者通过点击并调整环绕注释的选择圈来改变大小。
  3. 要旋转注释,只需抓住注释底部的圆圈进行旋转。注释旋转适用于所有类型,除文本注释外。
  4. 可以通过上下文工具栏自定义注释的颜色、笔画宽度、字体系列和字体大小。选中注释时会启用上下文工具栏。
  5. 选中注释后,快速访问工具栏将变为活动状态,提供快速操作,如复制、删除或编辑与选中注释相关的文本。

10. 滤镜和微调

      要对图像进行微调,请执行以下步骤:

  1. 点击微调按钮,显示图像编辑器中可用的微调选项列表。
  2. 从列表中选择一个微调选项,显示滑块以调整相应的滤镜。
  3. 点击画布或工具栏右上角的勾选图标应用修改。

     要在图像上应用滤镜,请执行以下步骤:

  1. 点击滤镜按钮,显示图像编辑器中可用的滤镜列表。
  2. 从列表中选择一个滤镜应用到图像上。
  3. 点击画布或工具栏右上角的勾选图标应用修改。

注意: 由于兼容性限制,Safari 浏览器内无法访问滤镜和微调功能。

11. 撤销和重做操作

      要撤销和重做在图像编辑器中执行的操作,请执行以下步骤:

  1. 一旦执行了操作,撤销按钮将启用。
  2. 一旦撤销操作执行后,重做按钮将启用。
  3. 点击工具栏左侧的撤销或重做按钮来执行撤销和重做操作。
  4. 使用 Ctrl + ZCtrl + Y 快捷键也可以分别撤销和重做操作。

12. 重置图像

      要恢复图像编辑器中的所有更改,请执行以下步骤:

  1. 点击工具栏右侧的重置按钮。
  2. 这将恢复图像编辑器中的所有更改。

13. 导出图像

       要保存修改后的图像,请执行以下步骤:

  1. 点击工具栏右侧的保存按钮。
  2. 使用 Ctrl + S 快捷键可以帮助用户保存图像。
  3. 从弹出的对话框中选择要保存的文件类型,以保存当前修改的图像。

        通过这些操作,用户可以方便地在Syncfusion图像编辑器中进行图像编辑、裁剪、注释、过滤、微调、撤销等操作,提高工作效率。

键盘交互

        Syncfusion图像编辑器组件遵循了键盘交互指南,方便依赖辅助技术(AT)或完全依赖键盘导航的用户。图像编辑器组件支持以下键盘快捷键:

按键组合操作描述
Ctrl + Z撤销上一个用户操作。
Ctrl + Y重做上一个用户操作。
Ctrl + S保存图像。
Ctrl + O打开图像。
Delete删除已通过鼠标点击选择的形状。

http://www.kler.cn/a/505424.html

相关文章:

  • ASP.NET Core - 缓存之分布式缓存
  • 【蓝牙】win11 笔记本电脑连接 hc-06
  • STC的51单片机LED点灯基于KEIL
  • 【STM32-学习笔记-7-】USART串口通信
  • 软件测试 —— Selenium常用函数
  • Open FPV VTX开源之默认MAVLink设置
  • 汽车故障码U010087 EMS Communication time out 解析和处理方法
  • C 陷阱与缺陷 —— Chapter one 词法陷阱
  • docker 部署 Kafka 单机和集群
  • 七十五:握手的优化:Session缓存、Ticket票据及TLS 1.3的0-RTT
  • iOS - 关联对象的实现
  • Qt 5.14.2 学习记录 —— 십삼 QComboBox、QSpinBox、QDateTimeEdit、QDial、QSlider
  • Jmeter 简单使用、生成测试报告(一)
  • 升级 SpringBoot3 全项目讲解 — 为什么 SpringBoot3 应该抛弃 Maven,搭配 Gradle 来使用?
  • Chapter5.3 Decoding strategies to control randomness
  • 论文阅读:Searching for Fast Demosaicking Algorithms
  • 从语音识别到语音合成:一步步构建智能语音交互系统
  • (12)springMVC文件的上传
  • pytorch快速入门--数据的基本操作
  • GPU算力平台|在GPU算力平台部署智能媒体生成助手LivePortrait的应用教程
  • uni-app黑马商场项目-4封装$myrequest方法并挂载到全局
  • 44.ComboBox的数据绑定 C#例子 WPF例子
  • APP推荐:全新TV端来了,8K原画电视版
  • iOS - 底层实现中涉及的类型
  • 计算机网络之---SSL/TLS协议
  • 人工智能任务20-利用LSTM和Attention机制相结合模型在交通流量预测中的应用