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

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

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}`)
})

本文地址：https://blog.csdn.net/GreyBearChao/article/details/107484988