Pure javascript image file download

imageFileDownload.ts

function getBase64Image(img: HTMLImageElement) {
    const canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height

    const ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0)

    const dataURL = canvas.toDataURL('image/png')
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, '')
}

function ba64toBlob(
    b64Data: string,
    contentType: string = '',
    sliceSize: number = 512
) {
    const byteCharacters = atob(b64Data)
    const byteArrays = []

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize)

        const byteNumbers = new Array(slice.length)
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i)
        }

        const byteArray = new Uint8Array(byteNumbers)
        byteArrays.push(byteArray)
    }

    return new Blob(byteArrays, { type: contentType })
}

function downloadImg(url: string) {
    const img: HTMLImageElement = new Image()
    img.addEventListener('load', () => {
        const base64Str: string = getBase64Image(img)
        const blog: Blob = ba64toBlob(base64Str, 'image/png')
        const urlStr: string = URL.createObjectURL(blog)
        const url: URL = new URL(urlStr)
        const aEl: HTMLAnchorElement = document.createElement('a')

        aEl.download = 'test.png'
        aEl.href = url.toString()
        aEl.click()
    })
    img.crossOrigin = 'anonymous'
    img.src = url
}