leafer-image-editor
v0.0.8-beta.5
Published
image editor
Maintainers
nanmu991100Readme
图片编辑器
介绍
用于图片添加素材功能
API
TemplateEditor Props
|属性名|类型|可选值|默认值|说明 |-|-|-|-|-| |width|Number|String|-|父容器宽度|画布宽| |height|Number|String|-|500|画布高| |bgColor|String|-|-|画布背景色| |list|Array|-|[]|素材编辑属性集合| |defaultCurrentIndex|Number|-|0|默认显示画布索引,非必填默认0| |limitCount|Number|-|0|显示画布添加素材个数， 为0时表示不限制个数| |icon|Object|-|{focusColor: "#EC7E59",color: "#FFE7DF",fontColor: "#0C193D"}|操作图标颜色配置| |boundaryConfig|Object|-|{mode: "hide",size: [容器宽, 容器高],position: [20, 20],}|区域配置，素材会在当前区域更改| |editorClassName|String|-|''|自定义编辑器类名 |canImageEdit|Boolean|-|true|是否显示图片素材编辑 |canTextEdit|Boolean|-|true|是否显示文本素材编辑 |canUpdateFrame|Boolean|-|true|是否可以更新加工区 |showDeleteIcon|Boolean|-|true|是否显示删除icon
scaleRange Options
|索引|类型|默认值|说明 |-|-|-|-| |0|Number|0.1|最小缩放范围，不可小于0 |1|Number|5|最大缩放范围|
boundaryConfig Options
|属性|类型|可选值|默认值|说明 |-|-|-|-|-| |mode|String|hide | restrict|hide|hide 超出隐藏； restrict 超出限制； |size|Array|-|当前画布宽高|可操作区域宽高(px) |position|Array|-|[0, 0]| 起算坐标点[x,y]
TemplateEditor Events
|事件|类型|参数|说明| |-|-|-|-| |@change| Function |参数1: current;参数2: list;参数3: index|素材change时触发 |@materialEdit|Function|参数1: record;参数2: index;|编辑素材左下角操作icon时触发 |@exceedsLimit|Function|-|添加素材超出限制 |@changeCurrent|Function|id|切换画布 |@doubleClickText|Function|参数1: record;参数2: index;|双击文本素材 |@changeOperation|Function|参数1: list;参数2: type;|操作后的回调
change params
|参数|类型|默认值|说明 |-|-|-|-| |current|Number | String |-|当前操作素材组项id |list|Array|-|素材编辑属性集合 |index|Number|-|当前操作素材索引
materialEdit params
|参数|类型|默认值|说明 |-|-|-|-| |record|Object|-|当前操作素材项 |index|Array|-|当前操作素材索引
TemplateEditor Exposed Properties
|属性名|类型|默认值|说明 |-|-|-|-| |current|Number | String|-|当前操作素材组项id |activeData|Object|-|当前可操作素材项
TemplateEditor Exposed Methods
|方法名|类型|参数|说明 |-|-|-|-| |toggleCurrent|Function|value: 素材组项Id|改变操作素材组项 |getCurrentId|Function|-|获取当前操作素材组ID |toggleBgImage|Function|url|更换背景图 |addItem|Function|data|添加面 |deleteItem|Function|id|删除面 |clear|Function|-|清空所有面 |setMaterials|Function|id(设置的面id), materials(设置素材组数组)|设置一面素材组 |resetMaterials|Function|id(设置的面id)|清空一面素材组 |getCurrentData|Function|-|获取当前操作素材组项 |getActiveData|Function|-|获取当前可操作素材项 |reset|Function|list 可选，不传时会初始化编辑器|重置 |drawerCanvas|Function|id|canvas转成图片 |exportFrame|Function|number: 导出加工区宽,id: 当前面id|导出加工区 |exportMaterial|Function|id: 当前面id|导出当前面生成图片的文本素材信息 |addImage|Function|data: 素材配置项|添加图片素材 |addText|Function|data: 素材配置项|添加文本素材 |replaceText|Function|text: 替换文本; index: 可选，素材索引，不填写时默认当前可操作素材索引|替换文本素材 |copy|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|复制素材 |top|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|置顶素材 |bottom|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|置底素材 |moveUp|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|上移素材 |moveDown|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|下移素材 |horizontalCenter|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|素材水平居中 |verticalCenter|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|素材垂直居中 |rotate|Function|deg: 旋转角度;index: 可选，素材索引，不填写时默认当前可操作素材索引|旋转素材 |flip|Function|type: x(水平翻转)|y(垂直翻转); index: 可选，素材索引，不填写时默认当前可操作素材索引|翻转素材 |opacity|Function|opacity: 0-100 ; index: 可选，素材索引，不填写时默认当前可操作素材索引|不透明度 |removeMaterial|Function|id: 必选，删除的素材id|删除当前面的某个素材 |selectMaterial|Function|id: 必选，选中的素材id|选中当前面的某个素材 |sortMaterial|Function|index: number 素材索引; targetIndex: number 目标素材索引; selected: boolean 排序后是否需要选中 |排序当前面的素材 |textStyles.family|Function|{fontFamily: 字体, fontFamilyUrl: '在线字体链接'}; reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|更改字体 |textStyles.bold|Function|reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|更改字重 |textStyles.italic|Function|reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置斜体 |textStyles.underLine|Function|reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置下划线 |textStyles.lineThrough|Function|reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置删除线 |textStyles.vertical|Function|reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字竖排 |textStyles.alignLeft|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字居左 |textStyles.alignCenter|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字居中 |textStyles.alignRight|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字居右 |textStyles.justify|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字两端对齐 |textStyles.distributed|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字分散对齐 |textStyles.fontSize|Function|size:字体大小 ;index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字字体大小 |textStyles.color|Function|color:颜色 ;index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字颜色 |textStyles.opacity|Function|opacity: 0-100; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字不透明度 |textStyles.lineHeight|Function|lineHeight: 1-5; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字行高 |textStyles.letterSpacing|Function|letterSpacing: 1-100; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字间距
list属性定义
[{
id: 1,// 唯一键值
imageUrl: "https://upfile.aiprint365.com/20250328-114806.jpg",// 底图
width: 0,// 画布宽，默认为0，根据此值计算配置信息比例
height: 0,// 画布高，默认为0，根据此值计算配置信息比例
name: "前身",// 画布名
frameX: 20, // 加工区X坐标
frameY: 20, // 加工区Y坐标
frameWidth: 300,// 加工区宽
frameHeight: 400,// 加工区高
materials: [// 素材组
{
id: 1,// 唯一键值
zIndex: 1,// 层级
x: 100,// 当前画布坐标X
y: 100,// 当前画布坐标X
width: 140,// 素材宽
height: 140,// 素材高
angle: 0, // 旋转角度
scale: 1, // 缩放比例 目前代码暂时没用
materialType: 1,// 素材类型 1 图片素材 2 文本素材
opacity: 1,// 不透明度
materialUrl: "https://i.postimg.cc/HsM6T9yj/f7e2fca50e1585f98e6d0a4518602b8d-png-3x.png",// 素材链接地址 当素材类型为图片素材时，即为图片素材地址，素材类型为文本素材时，生成后的图片数据中为文本生成的base64图片
color: '#000',// 文本属性 颜色
fontSize: 20,// 文本属性 字号
fontFamily: undefined,// 文本属性 字体
fontFamilyUrl: undefined,// 文本属性 艺术字体链接
fontWeight: 'normal',// 文本属性 字重
fontStyle: 'normal',// 文本属性 字体风格
textDecoration: 'inherit',// 文本属性 文本装饰效果
writingMode: 'inherit',// 文本属性 文本排布
textOrientation: 'inherit',// 文本属性 字符方向
textAlign: 'left',// 文本属性 对齐方式
textAlignLast: 'inherit',// 文本属性 最后一行对齐方式
content: "",// 文本属性 文本内容
letterSpacing: 0,// 文本属性 文本字符间距
lineHeight: 1.5,// 文本属性 文本行高
}
]
},
]Installation
npm install leafer-image-editorUseage
import ImageEditor from "leafer-image-editor";
import "leafer-image-editor/dist/leafer-image-editor.css";