欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-17 10:13:58
描述:使用 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 选项,则...

描述:使用 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