useBase64
Reactive base64 transforming. Supports plain text, buffer, files, canvas and images.
Demo
Text Input
Base64
Buffer Input
new ArrayBuffer(1024)
Base64
File Input
Base64
Image Input
Base64
Usage
import { ref, Ref } from 'vue'
import { useBase64 } from '@vueuse/core'
const text = ref('')
const { base64 } = useBase64(text)
import { ref, Ref } from 'vue'
import { useBase64 } from '@vueuse/core'
const text = ref('')
const { base64 } = useBase64(text)
Type Declarations
export interface ToDataURLOptions {
/**
* MIME type
*/
type?: string | undefined
/**
* Image quality of jpeg or webp
*/
quality?: any
}
export interface UseBase64Return {
base64: Ref<string>
promise: Ref<Promise<string>>
execute: () => Promise<string>
}
export declare function useBase64(target: MaybeRef<string>): UseBase64Return
export declare function useBase64(target: MaybeRef<Blob>): UseBase64Return
export declare function useBase64(
target: MaybeRef<ArrayBuffer>
): UseBase64Return
export declare function useBase64(
target: MaybeRef<HTMLCanvasElement>,
options?: ToDataURLOptions
): UseBase64Return
export declare function useBase64(
target: MaybeRef<HTMLImageElement>,
options?: ToDataURLOptions
): UseBase64Return
export interface ToDataURLOptions {
/**
* MIME type
*/
type?: string | undefined
/**
* Image quality of jpeg or webp
*/
quality?: any
}
export interface UseBase64Return {
base64: Ref<string>
promise: Ref<Promise<string>>
execute: () => Promise<string>
}
export declare function useBase64(target: MaybeRef<string>): UseBase64Return
export declare function useBase64(target: MaybeRef<Blob>): UseBase64Return
export declare function useBase64(
target: MaybeRef<ArrayBuffer>
): UseBase64Return
export declare function useBase64(
target: MaybeRef<HTMLCanvasElement>,
options?: ToDataURLOptions
): UseBase64Return
export declare function useBase64(
target: MaybeRef<HTMLImageElement>,
options?: ToDataURLOptions
): UseBase64Return
Source
Contributors
Anthony Fu
wheat
jelf