前端SDK插件对接

本插件基于 Vue3,TypeScript 的图片处理插件，主要功能是上传图片，然后对图片进行处理，处理完成之后返回处理后的图片地址。 带有步骤缓存功能，可以在处理完成之后返回上一步。

1. 使用插件

1.1 安装插件

npm i @youtu-pic/web-sdk

1.2 引入插件

import {removeBg} from '@youtu-pic/web-sdk'
import '@youtu-pic/web-sdk/dist/style.css'

2. 插件说明

关于插件的一些属性时间插槽等参数说明

2.1 Attributes

| key | 说明 | 参数类型 | 默认值 | |-----------------------|-------------------------------------|----------------------------------|-----------------------| | apiKey | 认证需要的 apiKey | string | | imageUrl | 需要处理的原图 url 地址 (也可以通过 setImage 去触发) | string | | | immediate | 当有了原图的时候是否立即处理图片 | boolean | true | | baseUrl | 服务器地址 | string | 后端地址 | | authHeader | 认证需要的 header key值 | string | Authorization | | uploadSize | 上传图片的大小限制,单位M | number | 10 | | disableUserConfig | 是否初始化用户历史配置 | number | false | | beforeDelete | 删除当前图片的回调 ,根据返回值确定是否删除 | (url:string)=>Promise<boolean> | ()=>Promise.resolve() | | onError | 错误回调函数 | (error:string)=>void | null | | showZoomButton | 是否展示缩放按钮 | boolean | true |

2.2 Events

| 事件名 | 说明 | 参数 | 回调参数 | |-------------------|---------------|--------------------|----------------------| | uploadSuccess | 图片上传成功之后的回调函数 | (p:string)=>void | string: 上传成功图片url | | uploadError | 图片上传失败之后的回调函数 | (error)=>void | | | handleSuccess | 图片处理成功之后的回调函数 | (p:string)=>void | string: 处理成功之后的图片url |

2.3 Slots

| 插槽名 | 说明 | |-------------------|-----------| | panelTopRight | 操作面板的右侧区域 | | panelBottom | 底部按钮区域 |

2.4 API

downloadImage

下载普通图片,返回处理后的图片base64

interface downloadImage {
   (): Promise<string>
}

downloadHighImage

下载高清图片,返回处理后的图片地址url(注意:高清图片处理时间较长)

interface downloadImageHD {
   (): Promise<string>
}

setImage

设置一个默认上传的图片地址

interface setImage {
   (url: string): void
}