useBase64
响应式 Base64 转换。支持纯文本、缓冲区、文件、画布、对象、映射、集合和图片。
演示
文本输入
Base64
缓冲区输入
new ArrayBuffer(1024)
Base64
文件输入
Base64
图片输入
Base64
用法
ts
import { useBase64 } from '@vueuse/core'
import { shallowRef } from 'vue'
const text = shallowRef('')
const { base64 } = useBase64(text)
如果使用对象、数组、映射或集合,可以在选项中提供序列化器。否则,您的数据将由默认序列化器序列化。对象和数组将通过 JSON.stringify 转换为字符串。映射和集合将在字符串化之前分别转换为对象和数组。
类型声明
显示类型声明
ts
export interface UseBase64Options {
/**
* Output as Data URL format
*
* @default true
*/
dataUrl?: boolean
}
export interface ToDataURLOptions extends UseBase64Options {
/**
* MIME type
*/
type?: string | undefined
/**
* Image quality of jpeg or 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