@gaoding/passport-editor

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

Usage no npm install needed!

<script type="module">
  import gaodingPassportEditor from 'https://cdn.skypack.dev/@gaoding/passport-editor';
</script>

README

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
}) {
    // 神策埋点
}

开发