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

• 情景再现: 今天在写页面时遇到这么一个请求: 有一张图片, 默认隐藏, 要求在该图片加载完毕后, 执行取消隐藏的动画. 目的是不要在执行动画期间图片有空白的样子. 第一个想到的当然是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 => {
      // 在这里处理错误
    })