vue 图片转base64格式的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 图片转base64格式的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

require的方式

用vue引入图片的require方式获取的值可以直接生成base64格式，但是该方法只适用于5kb大小以下的图片
```
const path = require('@/assets/images/test.png')
```

canvas.toDataURL()

该方法canvas.toDataURL(`image/${ext}`)传入的图片类型是什么生成后的base64数据前缀就是什么类型，如果传入的类型和生成的类型不同，则表示该方法不支持该类型的图片，例如gif图片转换后是png文章来源地址https://www.toymoban.com/news/detail-402231.html

imgUrlToBase64(url) {
      return new Promise((resolve, reject) => {
        if (!url) {
          reject('请传入url内容')
        }
        if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(url)) {
          // 图片地址
          const image = new Image()
          // 设置跨域问题
          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()
            // 转base64
            const dataUrl = canvas.toDataURL(`image/${ext}`)
            resolve(dataUrl || '')
          }
        } else {
          // 非图片地址
          reject('非(png/jpe?g/gif/svg等)图片地址');
        }
      })
    },

FileReader.readAsDataURL()

getBase64(imgUrl) {
      return new Promise((resolve, reject) => {
        if (!imgUrl) {
          reject('请传入imgUrl内容')
        }
        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) {
              // 得到一个blob对象
              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等)图片地址')
        }
      })
    },

到了这里，关于vue 图片转base64格式的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！