描述:使用 node 作为后端,读取本地图片,将其转为 buffer 或 binary 或 base64 返回给前端。
github案例:https://github.com/qinchao888/picture
// node 代码
app.get('/source', async (req, res) => {
const result = fs.readFileSync('./images/1.jpg')
// 如果指定了 encoding 选项,则此函数返回字符串。 否则,返回 buffer
res.send(result) // 返回 buffer 类型的图片数据
})
app.get('/source', async (req, res) => {
const result = fs.readFileSync('./images/1.jpg', 'binary')
res.write(result, 'binary') // 返回 binary 类型的图片数据
res.end()
})
app.get('/source', async (req, res) => {
const result = fs.readFileSync('./images/1.jpg', 'base64')
res.send(result) // 返回 base 类型的图片数据
})
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
如对本文有疑问, 点击进行留言回复!!
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论