rj-image-editor v1.3.3

rj-image-editor

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

Props

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 方法参数说明

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

参数说明

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

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