⬅️ Back to Table of Contents

📄 useBase64

📊 Analysis Summary

Metric	Count
🔧 Functions	4
📦 Imports	8
⚡ Async/Await Patterns	3
🟢 Vue Composition API	1
📐 Interfaces	4

📚 Table of Contents

• Imports
• Async/Await Patterns
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useBase64/index.ts

📦 Imports

Name	Source
MaybeRefOrGetter	vue
ShallowRef	vue
isClient	@vueuse/shared
isRef	vue
shallowRef	vue
toValue	vue
watch	vue
getDefaultSerialization	./serialization

---

Async/Await Patterns

Type	Function	Await Expressions	Promise Chains
promise-chain	execute	none	new Promise(...), imgLoaded(img).then(() => { const canvas = document.createE...
promise-chain	imgLoaded	none	new Promise(...)
promise-chain	blobToBase64	none	new Promise(...)

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none

---

Functions

useBase64(target: MaybeRefOrGetter<string | undefined>, options: UseBase64Options): UseBase64Return

Parameters:

• target MaybeRefOrGetter<string | undefined>
• options UseBase64Options

Returns: UseBase64Return

Code

export function useBase64(target: MaybeRefOrGetter<string | undefined>, options?: UseBase64Options): UseBase64Return

imgLoaded(img: HTMLImageElement): Promise<void>

Parameters:

• img HTMLImageElement

Returns: Promise<void>

Calls:

• resolve

Code

function imgLoaded(img: HTMLImageElement) {
  return new Promise<void>((resolve, reject) => {
    if (!img.complete) {
      img.onload = () => {
        resolve()
      }
      img.onerror = reject
    }
    else {
      resolve()
    }
  })
}

blobToBase64(blob: Blob): Promise<string>

Parameters:

• blob Blob

Returns: Promise<string>

Calls:

• resolve
• fr.readAsDataURL

Code

function blobToBase64(blob: Blob) {
  return new Promise<string>((resolve, reject) => {
    const fr = new FileReader()
    fr.onload = (e) => {
      resolve(e.target!.result as string)
    }
    fr.onerror = reject
    fr.readAsDataURL(blob)
  })
}

Internal helpers

Declared inside another function in this file.

execute(): any

Returns: any

Calls:

• toValue (from vue)
• resolve
• blobToBase64
• window.btoa
• String.fromCharCode
• _target.toDataURL
• _target.cloneNode
• imgLoaded(img).then(() => { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d')! canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0, canvas.width, canvas.height) resolve(canvas.toDataURL(options?.type, options?.quality)) }).catch
• getDefaultSerialization (from ./serialization)
• _serializeFn
• reject
• promise.value.then
• res.replace

Code

function execute() {
    if (!isClient)
      return

    promise.value = new Promise<string>((resolve, reject) => {
      try {
        const _target = toValue(target)
        if (_target == null) {
          resolve('')
        }
        else if (typeof _target === 'string') {
          resolve(blobToBase64(new Blob([_target], { type: 'text/plain' })))
        }
        else if (_target instanceof Blob) {
          resolve(blobToBase64(_target))
        }
        else if (_target instanceof ArrayBuffer) {
          resolve(window.btoa(String.fromCharCode(...new Uint8Array(_target))))
        }
        else if (_target instanceof HTMLCanvasElement) {
          resolve(_target.toDataURL(options?.type, options?.quality))
        }
        else if (_target instanceof HTMLImageElement) {
          const img = _target.cloneNode(false) as HTMLImageElement
          img.crossOrigin = 'Anonymous'
          imgLoaded(img).then(() => {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')!
            canvas.width = img.width
            canvas.height = img.height
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
            resolve(canvas.toDataURL(options?.type, options?.quality))
          }).catch(reject)
        }
        else if (typeof _target === 'object') {
          const _serializeFn = options?.serializer || getDefaultSerialization(_target)

          const serialized = _serializeFn(_target)

          return resolve(blobToBase64(new Blob([serialized], { type: 'application/json' })))
        }
        else {
          reject(new Error('target is unsupported types'))
        }
      }
      catch (error) {
        reject(error)
      }
    })

    promise.value.then((res) => {
      base64.value = options?.dataUrl === false
        ? res.replace(/^data:.*?;base64,/, '')
        : res
    })
    return promise.value
  }

---

Interfaces

UseBase64Options

Interface Code

export interface UseBase64Options {
  /**
   * Output as Data URL format
   *
   * @default true
   */
  dataUrl?: boolean
}

Properties

Name	Type	Optional	Description
dataUrl	boolean	✓	not shown

ToDataURLOptions

Interface Code

export interface ToDataURLOptions extends UseBase64Options {
  /**
   * MIME type
   */
  type?: string | undefined
  /**
   * Image quality of jpeg or webp
   */
  quality?: any
}

Properties

Name	Type	Optional	Description
type	string \| undefined	✓	not shown
quality	any	✓	not shown

UseBase64ObjectOptions<T>

Interface Code

export interface UseBase64ObjectOptions<T> extends UseBase64Options {
  serializer?: (v: T) => string
}

Properties

Name	Type	Optional	Description
serializer	(v: T) => string	✓	not shown

UseBase64Return

Interface Code

export interface UseBase64Return {
  base64: ShallowRef<string>
  promise: ShallowRef<Promise<string>>
  execute: () => Promise<string>
}

Properties

Name	Type	Optional	Description
base64	ShallowRef<string>	✗	not shown
promise	ShallowRef<Promise<string>>	✗	not shown
execute	() => Promise<string>	✗	not shown

---

Generated by Syntax Scribe