0.0.23 • Published 1 year ago

@youtu-pic/web-sdk v0.0.23

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

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

2.2 Events

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

2.3 Slots

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

eavan-dev-000194.png


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