JS将图片转Base64的两种方法

时间:2025-02-26 22:54:59

第一种:Blob和FileReader 对象

实现原理:
使用xhr请求图片,并设置返回的文件类型为Blob对象[ = “blob”]
使用FileReader 对象接收blob

    return new Promise(resolve => {
        let xhr = new XMLHttpRequest()
        ('get', src, true)
         = 'blob'
         = function () {
            if ( == 200) {
                let blob = 
                let oFileReader = new FileReader()
                 = function (e) {
                    const base64 = 
                    resolve(base64)
                }
                (blob)
            }
        }
        ()
    })

第二种:()

实现原理:
使用()方法
需要解决图片跨域问题 = ‘’;

return new Promise(resolve => {
        const img = new Image()
         = ''
         = src
         = function () {
            const canvas = ('canvas')
             = 
             = 
            const ctx = ('2d')
            ctx?.drawImage(img, 0, 0, , )
            const ext = (('.') + 1).toLowerCase()
            const dataURL = ('image/' + ext)
            resolve(dataURL)
  }