Passport-Editor

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

使用

Installl

npm install --save @gaoding/passort-editor

Usage

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
        }
    }
})

<passport-editor
    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"
    ></passport-editor>

Attributes

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

Events

• onError - 编辑器错误回调

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 - 埋点事件回调

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

开发