1.0.6 • Published 3 years ago
jsh-album-editor-pc v1.0.6
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 串即可