rj-image-editor

一个仿《图怪兽》的简易版图片编辑器

Props

名称	说明	类型	可选值	默认值
editorModel	编辑器模式	String	mobile	pc
menuWidth	pc模式下左侧菜单宽度	Number	-	80
width	编辑器宽度（仅pc模式可用），小于等于100为百分比，大于100为像素	Number	-	100
height	编辑器高度（仅pc模式可用），小于等于100为百分比，大于100为像素	Number	-	100
border	编辑器是否显示边框	Boolean	-	false
borderColor	编辑器边框颜色	String	-	#eeeeee
backgroundColor	场景初始背景色	String	-	#f6f6f6
sceneTranslate	pc模式下 鼠标滚动一次场景偏移的距离	Number	-	100
sceneWidth	场景初始宽度	Number	-	750
sceneHeight	场景初始高度	Number	-	1334
fontFamilyUrl	字体文件的路径，必须以/结尾（支持网络地址）	String	-	/
fontFamily	设置字体列表	Array	-	[] 查看下方说明
imgList	图片菜单对应的图片列表	Array	-	[]
logoList	logo菜单对应的图片列表	Array	-	[]
liveCode	活码菜单对应的列表	Array	-	[]
historyUpdateTime	历史记录更新频率	Number	-	300
maxHistory	最大历史步数	Number	-	100
uploadAction	图片上传接口地址	String	-	-
uploadData	图片上传接口附加参数	Function	-	-
imgMaxSize	图片可上传最大尺寸 单位MB	Number	-	5
uploadSuccess	图片上传成功后的回调函数 接收参数：接口返回结果	Function	-	-
pictureType	导出的图片类型	String	png	jpeg
pictureQuality	导出的图片质量，仅pictureType取值为jpeg格式时可用	Number	-	0.92

width和height说明

width和height属性仅 pc 模式可用
mobile 模式会自动设为窗口的宽高(window.innerWidth, window.innerHeight)

fontFamily 默认字体列表及数据结构

[
  {
    label: '庞门正道标题体',
    value: 'pmzdbtt'
  },
  {
    label: '文泉驿等宽微米黑',
    value: 'wqydkwmh'
  },
  {
    label: '思源宋体SC Regular',
    value: 'systSCRegular'
  },
  {
    label: '思源宋体SC Light',
    value: 'systSCLight'
  },
  {
    label: '思源宋体SC ExtraLight',
    value: 'systSCExtraLight'
  },
  {
    label: '思源宋体SC Heavy',
    value: 'systSCHeavy'
  },
  {
    label: '思源黑体 Regular',
    value: 'syhtRegular'
  },
  {
    label: '思源黑体 Light',
    value: 'syhtLight'
  },
  {
    label: '思源黑体 Heavy',
    value: 'syhtHeavy'
  }
]

liveCode数据结构说明

liveCode = [{
  name: '活码的名称',
  src: '活码的地址'
}]

uploadSuccess说明

该函数应该返回图片的服务器地址，然后会自动插入到编辑器中

uploadSuccess(result) { // result 为 uploadAction 设置的上传接口返回的结果数据
  return result.data.src // 返回图片地址
}

---

Methods

方法名	说明	参数	返回值
setData	设置场景数据	{Object/String} data [, {Array} extraImage]	-
getData	返回场景信息，不包含场景转换后的 base64 值	String 返回的数据类型，默认 JSON 对象 可设置 string 返回 JSON 字符串	Object

setData 方法参数说明

data: 场景数据，可设置JSON字符串或JSON对象
extraImage: 额外的图片信息，数据结构:

[{
  value, // 图片1地址
  width, // 图片1宽度
  height, // 图片1高度
  opacity, // 透明度 默认1
  top, // 上边距
  right, // 右边距
  bottom, // 下边距
  left // 左边距
}, {
  value, // 图片2地址
  width, // 图片2宽度
  height, // 图片2高度
  opacity, // 透明度 默认1
  top, // 上边距
  right, // 右边距
  bottom, // 下边距
  left // 左边距
}]

---

Events

事件名	说明	参数
save	点击保存按钮后的事件	{base64: '', sceneData: ''}

参数说明

{
  base64: '', // 场景转换成图片后的 base64 值
  sceneData: '' // 场景信息转换后的 JSON 串，对于后台来说直接传给后台保存即可
}

回显的时候后台将该JSON串原样返回，然后调用 setData 传入该 JSON 串即可