@jzg-cn/leafer-image-editor
v1.0.3
Published
A Vue 3 image editor component based on leafer-ui
Downloads
531
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],}|区域配置，素材会在当前区域更改| |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 @jzg-cn/leafer-image-editor注意：需要同时安装 peer dependencies：
npm install vue leafer-ui leafer @leafer-in/editor @leafer-in/export
Usage
局部引入（推荐）
适合只在某个组件里使用，可以通过 ref 调用所有暴露的方法。
第一步：在使用的组件里引入
// YourComponent.vue
import { ImageEditor } from '@jzg-cn/leafer-image-editor'
import '@jzg-cn/leafer-image-editor/dist/leafer-image-editor.css'第二步：注册并使用
<script setup>
import { ref, onMounted } from 'vue'
import { ImageEditor } from '@jzg-cn/leafer-image-editor'
import '@jzg-cn/leafer-image-editor/dist/leafer-image-editor.css'
const editorRef = ref(null)
onMounted(() => {
// 组件挂载后才能调用 ref 方法
const activeData = editorRef.value?.getActiveData()
})
</script>
<template>
<ImageEditor
ref="editorRef"
:list="list"
:width="800"
:height="600"
/>
</template>全局注册
适合在多个组件里使用，在 main.js 注册一次，所有组件无需重复 import。
第一步：在 main.js 中注册
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import LeaferImageEditor from '@jzg-cn/leafer-image-editor'
import '@jzg-cn/leafer-image-editor/dist/leafer-image-editor.css'
const app = createApp(App)
app.use(LeaferImageEditor)
app.mount('#app')第二步：在任意组件里直接使用，无需 import
<script setup>
import { ref, onMounted } from 'vue'
const editorRef = ref(null)
onMounted(() => {
// 全局注册后，ref 方法同样可以正常调用
const activeData = editorRef.value?.getActiveData()
})
</script>
<template>
<ImageEditor
ref="editorRef"
:list="list"
:width="800"
:height="600"
/>
</template>⚠️ 注意：不要把
default导入的插件对象当组件使用。以下写法是错误的：// ❌ 错误：LeaferImageEditor 是插件对象，不是组件 import LeaferImageEditor from '@jzg-cn/leafer-image-editor' // components: { LeaferImageEditor } ← 不要这样用需要局部使用时，请用具名导入
import { ImageEditor } from '...'。