SuperAPI AI 工具集

syncfusion-vue-image-editor

前端与建站

查看项目

更新于 10-16 05:05

技能介绍

用途:在 Vue 3 应用中嵌入完整的图片编辑器,用于图片编辑、标注、滤镜处理与图层管理。

主要能力:支持从文件、URL、base64、blob、文件管理器或树视图加载图片,并可导出为 PNG、JPEG、SVG、WEBP。编辑功能包括旋转、水平/垂直翻转、-45° 至 +45° 校正、按多种宽高比裁剪、缩放与平移、调整尺寸、清除与重置图片。标注支持文本(字体、字号、颜色、加粗斜体下划线删除线、多行)、形状(矩形、椭圆、直线、箭头、路径)、手绘、图片与图标水印,并可通过 Z 轴顺序管理前后层级。效果方面提供预设滤镜(Chrome、Cold、Warm、Grayscale、Sepia、Invert)、亮度对比度饱和度及色相曝光模糊不透明度微调、边框装饰,以及模糊或像素化打码。另有 16 步撤销重做、工具栏与快捷访问工具栏定制。

使用方式:安装后导入 ImageEditorComponent 与所需模块,在模板中声明组件并设置 width、height,通过 ref 调用 open()、export() 等方法;用 @created、@fileOpened、@shapeChanging 等事件处理加载与交互;可用 uploadSettings 限制扩展名和大小,通过 locale 设置本地化。

适用场景:需要在 Vue 3 前端完成图片裁剪美化、添加标注水印、应用滤镜或对敏感信息打码的界面。

限制:组件面向 Vue 3;可打开 PNG、JPEG、JPG、SVG、WEBP、BMP,导出仅支持 PNG、JPEG、SVG、WEBP;撤销重做历史上限为 16 步;具体授权与收费信息暂未提供。