前端解析后端返回的buffer或binary或base64类型的图片数据
程序员文章站
2022-03-20 23:28:51
描述:使用 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 类型的图片数据
})
前端解析
- 处理 buffer 和 binary 类型的图片数据一般采用两种方式,一种转成 blob,一种转成 arraybuffer。
- 处理 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