js 图片转base64格式

原创已于 2024-03-29 16:44:25 修改 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2024-03-29 15:58:40 首次发布

文章介绍了如何使用JavaScript创建一个异步函数，接收一个图片URL作为参数，解决跨域问题后，将图片转换为dataURL并返回。主要涉及Image对象、CanvasAPI和Promise的使用。

export const getImgSrc = (IMG: any) => new Promise(resolve => {
    const img = new Image()
    img.crossOrigin = ''
    img.src = IMG
    img.onload = () => {
        const canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext('2d')
        ctx?.drawImage(img, 0, 0, img.width, img.height)
        const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
        // eslint-disable-next-line prefer-template
        const dataURL = canvas.toDataURL('image/' + ext)
        resolve(dataURL)
    }
})