Hook for converting small images or thumbnails into binary data. Converting images in this way gives good experience while loading images in Next.js apps

useImageToBase64.ts

import { useEffect } from 'react'

export function useImageToBase64(
    src: string,
    callback: (res: string) => void,
    outputFormat?: string
) {
    useEffect(() => {
        let img = new Image() // Image constructor equivalent to document.createElement
        img.crossOrigin = 'Anonymous'
        img.onload = function () {
            let canvas = document.createElement('CANVAS')
            let ctx = canvas.getContext('2d')
            let dataURL
            canvas.height = this.naturalHeight
            canvas.width = this.naturalWidth
            ctx.drawImage(this, 0, 0)
            dataURL = canvas.toDataURL(outputFormat)
            callback(dataURL)
        }
        img.src = src
        if (img.complete || img.complete === undefined) {
            img.src =
                'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
            img.src = src
        }
    }, [])
}