前端解析后端返回的buffer或binary或base64类型的图片数据

﹏ヽ暗。殇╰゛Y 2023-02-28 11:24 9阅读 0赞

描述：使用 node 作为后端，读取本地图片，将其转为 buffer 或 binary 或 base64 返回给前端。

[github案例][github]：https://github.com/qinchao888/picture

### 后端处理 ###

#### buffer 类型的图片 ####

// node 代码
    app.get('/source', async (req, res) => { 
      const result = fs.readFileSync('./images/1.jpg') 
      // 如果指定了 encoding 选项，则此函数返回字符串。 否则，返回 buffer
      res.send(result) // 返回 buffer 类型的图片数据
    })

#### binary 类型的图片 ####

app.get('/source', async (req, res) => { 
      const result = fs.readFileSync('./images/1.jpg', 'binary')
      res.write(result, 'binary') // 返回 binary 类型的图片数据
      res.end()
    })

#### base64 类型的图片 ####

app.get('/source', async (req, res) => { 
      const result = fs.readFileSync('./images/1.jpg', 'base64') 
      res.send(result) // 返回 base 类型的图片数据
    })

### 前端解析 ###

1.  处理 buffer 和 binary 类型的图片数据一般采用两种方式，一种转成 blob，一种转成 arraybuffer。
2.  处理 base64 类型的图片数据拼接前缀后直接显示图片。

function createImg (url) {  // 将图片显示到页面上
      var img = document.createElement('img')
      img.src = url
      document.body.appendChild(img)
    }
    
    // 第一种：采用 blob 方式
    axios.get('http://localhost:8888/source', { 
      responseType: 'blob'
    }).then(res => { 
      var url =  window.URL.createObjectURL(res.data) // blob
      console.log('url', url)
      createImg(url)
    })
    
    // 第二种：采用 arraybuffer 方式
    axios.get('http://localhost:8888/source', { 
      responseType: 'arraybuffer'
    }).then(res => { 
      var url = window.URL.createObjectURL(new Blob([res.data])) // arraybuffer
      createImg(url)
    })

// 处理 base64 类型的图片数据
    axios.get('http://localhost:8888/source').then(res => { 
      var url = 'data:image/jpg;base64,' + res.data // base64方式，需要手动拼接前缀或者由后端拼好直接显示
      createImg(url)
    })
    
    // 后端拼接 base64 前缀示例，此时前端直接展示即可
    app.get('/source', async (req, res) => { 
      const path = './images/1.jpg'
      const result = fs.readFileSync(path, 'base64')
      const reg = /^[^]+\.([^\.]+)$/
      res.send(`data:image/${ path.match(reg)[1]};base64,${ result}`)
    })

[github]: https://github.com/qinchao888/picture