JS將圖片轉(zhuǎn)Base64的2種方法代碼

更新時間：2024年05月09日 11:35:19 作者：山楂樹の

這篇文章主要給大家介紹了關于JS將圖片轉(zhuǎn)Base64的2種方法,base64 其實是一種編碼轉(zhuǎn)換方式,將ASCII字符轉(zhuǎn)換成普通文本,是網(wǎng)絡上最常見的用于傳輸8Bit字節(jié)代碼的編碼方式之一,需要的朋友可以參考下

第一種：Blob和FileReader 對象

實現(xiàn)原理：
使用xhr請求圖片,并設置返回的文件類型為Blob對象[xhr.responseType = “blob”]
使用FileReader 對象接收blob

    return new Promise(resolve => {
        let xhr = new XMLHttpRequest()
        xhr.open('get', src, true)
        xhr.responseType = 'blob'
        xhr.onload = function () {
            if (this.status == 200) {
                let blob = this.response
                let oFileReader = new FileReader()
                oFileReader.onloadend = function (e) {
                    const base64 = e.target.result
                    resolve(base64)
                }
                oFileReader.readAsDataURL(blob)
            }
        }
        xhr.send()
    })

第二種：canvas.toDataURL()

實現(xiàn)原理：
使用canvas.toDataURL()方法
需要解決圖片跨域問題 image.crossOrigin = ‘’;

return new Promise(resolve => {
        const img = new Image()
        img.crossOrigin = ''
        img.src = src
        img.onload = function () {
            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()
            const dataURL = canvas.toDataURL('image/' + ext)
            resolve(dataURL)
  }

附：需要轉(zhuǎn)化的圖片很可能存在跨域問題，要么后端處理，要么前端處理。這里是使用時在vue中處理了跨域問題

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://-----:8084'
        changeOrigin: true,
        ws: true,
        pathRewrite: {
 
          '^/api': ''
        }
      }
    }
  },