vue 图片转base64格式的方法，已成功拿下字节、腾讯、脉脉offer

1. require的方式

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

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)


### 最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。



**96道前端面试题：**

- ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/984c05d9c5cc4fa6acde59061cb3a357~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771407205&x-signature=ZFnmd9bnwD6hVlwC42Ha%2Fe67OGc%3D)

**常用算法面试题：**

- ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f2245e0dd74d4a67a2310da7b6ebe326~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771407205&x-signature=2lAuL%2BSrXb%2FqvZs3%2BVTEcKS6Sss%3D)

**前端基础面试题：**
内容主要包括**HTML，CSS，JavaScript，浏览器，性能优化**

- ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/927f454c3b454646adc9d62306325fb4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771407205&x-signature=2BQd2ryPC%2FBE8x%2BBhn4NrUOn8zM%3D)
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**