前端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
}