Passport-Editor

证件照编辑器的 Vue 组件，承载着证件照特效核心功能。

使用

$3

``bash
npm install --save @gaoding/passort-editor
`

$3

`js

import Vue from 'vue';
import PassportEditor from '@gaoding/passport-editor';

Vue.use(PassportEditor);

Vue({
el: '#app',
data: () {
return {
clipData: clipData,
passportWidth: 437,
passportHeight: 590,
sourceImage: '',
options: {}
};
},
methods: {
onError: function(error) => {
// do something
},
onTrack: function(track) => {
// tracking
}
}
})
`

`html
ref="passportEditor"
style="width:100%;height:100%"
:clip-data="clipData"
:passport-width="passportWidth"
:passport-height="passportHeight"
:source-image="sourceImage"
:options="options"
@on-error="onError"
@on-track="onTrack"
>
`

$3

| 参数 | 必填 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| clipData | 是 | 抠图服务返回的数据 | Object | - | - |
| passportWidth | 是 | 证件照的宽度 | Number | - | - |
| passportHeight | 是 | 证件照的高度 | Number | - | - |
| sourceImage | 是 | 原始照片地址 | String | - | - |
| options | 否 | 编辑器的配置 | Object | - | PassportEditor.defaultConfig |

$3

- onError - 编辑器错误回调

`ts

onError: function(error: {name: string, message: string}) {
// PassportEditor.ErrorType 暴露了编辑器内部的错误枚举
const ErrorType = PassportEditor.ErrorType;
switch (error.name) {
case ErrorType.NO_WEB_ASSEMBLY:
// 不支持 WebAssembly
case ErrorType.LOAD_IMAGE:
// 加载图片错误
case ErrorType.UNKNOWN:
// 未知错误
}
}

`

- onTrack - 埋点事件回调

`ts

onTrack: function(track: {
event: string,
op_busi: 'string',
sc_page: 'string',
[key in string]: string
}) {
// 神策埋点
}

``

开发