Package Exports

leafer-image-editor
leafer-image-editor/dist/image-editor.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (leafer-image-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

图片编辑器

介绍

用于图片添加素材功能

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],}	区域配置，素材会在当前区域更改
scaleRange	Array	-	[0.1, 5]	限制缩放范围
editorClassName	String	-	''	自定义编辑器类名
canImageEdit	Boolean	-	true	是否显示图片素材编辑
canTextEdit	String	-	true	是否显示文本素材编辑

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;	双击文本素材

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	更换背景图
getCurrentData	Function	-	获取当前操作素材组项
getActiveData	Function	-	获取当前可操作素材项
reset	Function	-	重置
drawerCanvas	Function	id	canvas转成图片
exportFrame	Function	number: 导出加工区宽,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: 可选，素材索引，不填写时默认当前可操作素材索引	不透明度
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: "前身",// 画布名
        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-editor

Useage

import ImageEditor from "leafer-image-editor";
import "leafer-image-editor/dist/leafer-image-editor.css";