快捷導(dǎo)航

vue圖片轉(zhuǎn)base64格式的方法示例

更新時(shí)間：2022年12月21日 14:55:55 作者：仗劍東游的貓

對(duì)于前后端分離的項(xiàng)目,為了統(tǒng)一響應(yīng)參數(shù),需要將圖片轉(zhuǎn)換成base64的格式,下面這篇文章主要給大家介紹了關(guān)于vue圖片轉(zhuǎn)base64格式的相關(guān)資料,需要的朋友可以參考下

1.require的方式

用vue引入圖片的require方式獲取的值可以直接生成base64格式，但是該方法只適用于5kb大小以下的圖片

const path = require('@/assets/images/test.png')

2.canvas.toDataURL()

該方法canvas.toDataURL(`image/${ext}`)傳入的圖片類型是什么生成后的base64數(shù)據(jù)前綴就是什么類型，如果傳入的類型和生成的類型不同，則表示該方法不支持該類型的圖片，例如gif圖片轉(zhuǎn)換后是png

imgUrlToBase64(url) {
      return new Promise((resolve, reject) => {
        if (!url) {
          reject('請(qǐng)傳入url內(nèi)容')
        }
        if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(url)) {
          // 圖片地址
          const image = new Image()
          // 設(shè)置跨域問題
          image.setAttribute('crossOrigin', 'anonymous')
          // 圖片地址
          image.src = url
          image.onload = () => {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            canvas.width = image.width
            canvas.height = image.height
            ctx.drawImage(image, 0, 0, image.width, image.height)
            // 獲取圖片后綴
            const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase()
            // 轉(zhuǎn)base64
            const dataUrl = canvas.toDataURL(`image/${ext}`)
            resolve(dataUrl || '')
          }
        } else {
          // 非圖片地址
          reject('非(png/jpe?g/gif/svg等)圖片地址');
        }
      })
    },

3.FileReader.readAsDataURL()

getBase64(imgUrl) {
      return new Promise((resolve, reject) => {
        if (!imgUrl) {
          reject('請(qǐng)傳入imgUrl內(nèi)容')
        }
        if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(imgUrl)) {
          window.URL = window.URL || window.webkitURL
          var xhr = new XMLHttpRequest()
          xhr.open('get', imgUrl, true)
          xhr.responseType = 'blob'
          xhr.onload = function() {
            if (this.status == 200) {
              // 得到一個(gè)blob對(duì)象
              var blob = this.response
              const oFileReader = new FileReader()
              oFileReader.onloadend = function(e) {
                const base64 = e.target.result
                resolve(base64 || '')
              }
              oFileReader.readAsDataURL(blob)
            }
          }
          xhr.send()
        } else {
          // 非圖片地址
          reject('非(png/jpe?g/gif/svg等)圖片地址')
        }
      })
    },