Skip to content
On this page

useBase64

Category
Last Changed
3 months ago

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

SourceDemoDocs

Contributors

Anthony Fu
wheat
jelf

Changelog

v7.0.1 on 11/22/2021
6bc5f - fix: improve SSR compatibility
v6.8.0 on 11/6/2021
ef6b7 - feat: new function (#879)
useBase64 has loaded