图片转base64，blob，以及实现在线下载

1. file.js

/**
 * @descriptionimg url to base64
 */
export function urlToBase64(url, mineType){
    return new Promise((resolve, reject) => {
        let canvas = document.createElement('CANVAS') 
        const ctx = canvas?.getContext('2d')

        const img = new Image()
        img.crossOrigin = ''
        img.onload = function () {
            if (!canvas || !ctx) {
                return reject()
            }
            canvas.height = img.height
            canvas.width = img.width
            ctx.drawImage(img, 0, 0)
            const dataURL = canvas.toDataURL(mineType || 'image/png')
            canvas = null
            resolve(dataURL)
        }
        img.src = url
    })
}

/**
 * @description: base64 to blob
 */
function dataURLtoBlob(base64Buf){
    const arr = base64Buf.split(',')
    const typeItem = arr[0]
    const mime = typeItem.match(/:(.*?);/)[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new Blob([u8arr], { type: mime })
}

// 下载文件Buf
export function downloadByData(data, filename, mime, bom) {
    const blobData = typeof bom !== 'undefined' ? [bom, data] : [data]
    const blob = new Blob(blobData, { type: mime || 'application/octet-stream' })
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename)
    } else {
        const blobURL = window.URL.createObjectURL(blob)
        const tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', filename)
        if (typeof tempLink.download === 'undefined') {
            tempLink.setAttribute('target', '_blank')
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
    }
}

// 下载base64格式
export function downloadByBase64(buf, filename, mime, bom) {
    const base64Buf = dataURLtoBlob(buf)
    downloadByData(base64Buf, filename, mime, bom)
}

// 下载在线图片
export function downloadByOnlineUrl(url, filename, mime, bom) {
    urlToBase64(url).then((base64) => {
        downloadByBase64(base64, filename, mime, bom)
    })
}

2导入引用

import { Button, Divider } from 'antd'
import { downloadByBase64, downloadByOnlineUrl } from '@/utils/file'
export default function Index() {
    const downImg = () => {
        downloadByOnlineUrl('https://img1.baidu.com/it/u=3007048469,3759326707&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
            '图片.jpg')
        }
    const downFile = () => {
        downloadByBase64( 'base64地址','图片.jpg')
    }
    return (
        <div className="card">
            <Button onClick={downFile}>下载文件</Button>
            <Divider />
            <Button onClick={downImg}>下载在线图片</Button>
        </div>
    )
}