vue图片转base64格式的方法-创新互联

1. require的方式

   用vue引入图片的require方式获取的值可以直接生成base64格式，但是该方法只适用于5kb大小以下的图片

   

   10年积累的网站设计制作、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站设计后付款的网站建设流程，更有安福免费网站建设让你可以放心的选择与我们合作。

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

2. canvas.toDataURL()

   该方法canvas.toDataURL(`image/${ext}`)传入的图片类型是什么生成后的base64数据前缀就是什么类型，如果传入的类型和生成的类型不同，则表示该方法不支持该类型的图片，例如gif图片转换后是png

   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等)图片地址');
           }
         })
       },

3. 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等)图片地址')
           }
         })
       },

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧