526互联

js_使用axios请求图片资源, 并读取图片资源为base64格式

发布时间 2023-08-30 22:41:38作者: Steperouge
  • 情景再现: 今天在写页面时遇到这么一个请求: 有一张图片, 默认隐藏, 要求在该图片加载完毕后, 执行取消隐藏的动画. 目的是不要在执行动画期间图片有空白的样子. 第一个想到的当然是img的onload回调函数. 但是天生反骨不爱用行内元素. 于是想到使用ajax请求图片资源, 再使用FileReader读取图片数据, 使用readAsDataURL来转成Base64格式, 将图片以块元素的背景来进行渲染.

使用ajax读取图片资源

  • 这里使用axios读取图片资源, 读取到的是二进制流, axios可以标记响应数据格式, 更为方便一点

  • axios.get('图片地址',
	{
      responseType: 'blob', // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    }
  )
  .then(response => {
    // 在这里处理数据
  })
  .catch(err => {
   	// 在这里处理错误
  })

使用FileReader读取图片资源并转为base64格式

  • axios.get('图片地址',
	{
      responseType: 'blob', // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    }
  )
  .then(response => {
    const reader = new FileReader()
    reader.readAsDataURL(response.data)
    reader.onload = function () {
      oAvatorContent.style.backgroundImage = `url(${this.result})` // 将转化的base64格式图片数据赋值给块元素的背景属性
      oAvatorContainer.classList.add('active') // 执行动画
    }
  })
  .catch(err => {
    // 在这里处理错误
  })