前端实现图片转Base64

废话不多说，直接上代码

base64 (url) {
      return new Promise((resolve) => {
        const image = new Image()
        // 先设置图片跨域属性
        image.crossOrigin = 'Anonymous'
        // 再给image赋值src属性，先后顺序不能颠倒
        image.src = url
        image.onload = function () {
          const canvas = document.createElement('CANVAS')
          // 设置canvas宽高等于图片实际宽高
          canvas.width = image.width
          canvas.height = image.height
          canvas.getContext('2d').drawImage(image, 0, 0)
          // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
          const dataURL = canvas.toDataURL('image/jpeg')
          resolve(dataURL)
        }
        image.onerror = () => {
          resolve({ message: '相片处理失败' })
        }
      })
    },

我们传入一个图

async mounted () {
    // this.init()
    const url = await this.base64('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg')
    console.log(url)
  },

片地址看看是否成功

但是，一般我们在做这样的需求前，处理的图片肯定不止一张，接下来就要批量处理，但是这个方法是异步，我们要将一个数组内的每个对象的地址都转成base64,才算真正完成我们的功能。前端一般接收到后端的数据一般是这种格式。

但是我们正常使用map函数遍历去将图片地址转成base64，上代码：

 const newImgOBj = await Promise.all(this.imgOBj.map(async (item) => {
      return {
        name: item.name,
        img: await this.base64(item.img)
      }
    }))
    console.log(newImgOBj)

打印一下看结果发现我们的图片地址已经变成了base64编码。

最后我们将图片使用img标签正常渲染就好了，小知识：浏览器在识别同一个一模一样的图片地址，浏览器只会请求一遍该图片资源哦。

前端实现图片转Base64

猜你喜欢