useBase64

类别

Utilities

导出体积

794 B

上次更改

6 months ago

响应式的 Base64 转换。支持 plain text，buffer，files，canvas，objects，maps，sets 和 images。

示例

源码 playground (beta)

文本输入

Base64

Buffer 输入

new ArrayBuffer(1024)

Base64

文件选择

Base64

图片输入

Base64

用法

import { useBase64
 } from '@vueuse/core'
import { shallowRef
 } from 'vue'

const text
 = shallowRef
('')

const { base64
 } = useBase64
(text
)

如果你使用对象、数组、Map 或 Set，你可以在选项中提供序列化器。否则，你的数据将使用默认的序列化器进行序列化。对象和数组将通过 JSON.stringify 转换为字符串。Map 和 Set 将在转换为对象和数组之后再进行字符串化。

类型声明

显示类型声明

export interface UseBase64Options {
  /**
   * Output as Data URL format
   *
   * @default true
   */
  dataUrl
?: boolean
}
export interface ToDataURLOptions extends UseBase64Options {
  /**
   * MIME type
   */
  type
?: string | undefined
  /**
   * jpeg 或 webp 的图像质量
   */
  quality
?: any
}
export interface UseBase64ObjectOptions
<T
> extends UseBase64Options {
  serializer
?: (v
: T
) => string
}
export interface UseBase64Return {
  base64
: ShallowRef
<string>
  promise
: ShallowRef
<Promise
<string>>
  execute
: () => Promise
<string>
}
export declare function useBase64
(
  target
: MaybeRefOrGetter
<string | undefined>,
  options
?: UseBase64Options,
): UseBase64Return
export declare function useBase64
(
  target
: MaybeRefOrGetter
<Blob | undefined>,
  options
?: UseBase64Options,
): UseBase64Return
export declare function useBase64
(
  target
: MaybeRefOrGetter
<ArrayBuffer | undefined>,
  options
?: UseBase64Options,
): UseBase64Return
export declare function useBase64
(
  target
: MaybeRefOrGetter
<HTMLCanvasElement | undefined>,
  options
?: ToDataURLOptions,
): UseBase64Return
export declare function useBase64
(
  target
: MaybeRefOrGetter
<HTMLImageElement | undefined>,
  options
?: ToDataURLOptions,
): UseBase64Return
export declare function useBase64
<T
 extends Record
<string, unknown>>(
  target
: MaybeRefOrGetter
<T
>,
  options
?: UseBase64ObjectOptions
<T
>,
): UseBase64Return
export declare function useBase64
<T
 extends Map
<string, unknown>>(
  target
: MaybeRefOrGetter
<T
>,
  options
?: UseBase64ObjectOptions
<T
>,
): UseBase64Return
export declare function useBase64
<T
 extends Set
<unknown>>(
  target
: MaybeRefOrGetter
<T
>,
  options
?: UseBase64ObjectOptions
<T
>,
): UseBase64Return
export declare function useBase64
<T
>(
  target
: MaybeRefOrGetter
<T
[]>,
  options
?: UseBase64ObjectOptions
<T
[]>,
): UseBase64Return