0.0.23 • Published 1 year ago
@youtu-pic/web-sdk v0.0.23
前端SDK插件对接
本插件基于 Vue3,TypeScript 的图片处理插件,主要功能是上传图片,然后对图片进行处理,处理完成之后返回处理后的图片地址。 带有步骤缓存功能,可以在处理完成之后返回上一步。
1. 使用插件
1.1 安装插件
npm i @youtu-pic/web-sdk1.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
}0.0.22
1 year ago
0.0.23
1 year ago
0.0.20
1 year ago
0.0.21
1 year ago
0.0.15
1 year ago
0.0.16
1 year ago
0.0.17
1 year ago
0.0.18
1 year ago
0.0.19
1 year ago
0.0.10
1 year ago
0.0.11
1 year ago
0.0.12
1 year ago
0.0.13
1 year ago
0.0.14
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago