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|
$3
width和height属性仅 pc 模式可用
mobile 模式会自动设为窗口的宽高(window.innerWidth, window.innerHeight)
$3
``
js
[
{
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'
}
]
`
$3
`
js
liveCode = [{
name: '活码的名称',
src: '活码的地址'
}]
`
$3
该函数应该返回图片的服务器地址，然后会自动插入到编辑器中
`
js
uploadSuccess(result) { // result 为 uploadAction 设置的上传接口返回的结果数据
return result.data.src // 返回图片地址
}
`
---
Methods
|方法名|说明|参数|返回值|
|-|-|-|-|
|setData|设置场景数据|{Object/String} data [, {Array} extraImage]|-|
|getData|返回场景信息，不包含场景转换后的 base64 值|String 返回的数据类型，默认 JSON 对象
可设置 string 返回 JSON 字符串|Object|
$3
data: 场景数据，可设置JSON字符串或JSON对象
extraImage: 额外的图片信息，数据结构:
`
js
[{
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: ''}|
$3
`
js
{
base64: '', // 场景转换成图片后的 base64 值
sceneData: '' // 场景信息转换后的 JSON 串，对于后台来说直接传给后台保存即可
}
``
回显的时候后台将该JSON串原样返回，然后调用 setData 传入该 JSON 串即可