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 串即可