2024年前端最全vue 图片转base64格式的方法，快点来白嫖

最新推荐文章于 2025-05-11 15:33:07 发布

2401_84619606

最新推荐文章于 2025-05-11 15:33:07 发布

阅读量1.6k

点赞数 5

分类专栏：程序员文章标签：前端 vue.js 面试

本文链接：https://blog.youkuaiyun.com/2401_84619606/article/details/138500166

版权

程序员专栏收录该内容

93 篇文章

订阅专栏

本文介绍了前端开发中Vue框架下将图片转换为Base64格式的方法，强调了理解框架原理和算法的重要性。同时，提到了在面试前了解公司业务、勇于拒绝不满意offer的建议，并分享了大厂前端面试题解析资源，涵盖了计算机网络如HTTP状态码、TCP协议等内容，以及算法如链表、排序等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

      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 {