javascript - 如何在 JS 中对二进制图像进行 base64 编码以供浏览器显示
问题描述
我们在从 REST 后端 API 接收的浏览器(实际上是 Chrome)中显示二进制图像时遇到问题。像这样在 Java 中定义的后端 REST 端点
@GetMapping(path = "/images/{imageId:\\d+}/data", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public @ResponseBody byte[] getImageData(@PathVariable long imageId) {
return ... skipped ...
}
在前端,我们执行以下步骤:
fetch
通过JS方法调用请求图片数据
async function getImage(id) {
return await fetch(`${URL}/images/${id}/data`, {
method: 'GET',
headers: new Headers(HEADERS)
}).then(response => {
return response.text();
});
}
- 因此在前端我们有这种格式的原始二进制图像数据(到目前为止一切都很好 - 它实际上是 JPEG 二进制数据)。附上源JPEG
https://www.dropbox.com/s/8mh6xz881by5lu1/0gCrmsLkgik.jpg?dl=0
- 然后我们调用这段代码来接收base64编码的图像
let reader = new FileReader();
reader.addEventListener('loadend', event => {
console.log(event.srcElement.result)
});
reader.readAsDataURL(new Blob([data]));
- 结果我们有一些看起来像base64编码的数据
https://www.dropbox.com/s/uvx042j2dgizkr9/base64.txt?dl=0
- 我们试图将base64编码的数据放入
<img>
元素中但没有成功:(
所以问题是如何在前端接收正确的 base64 图像以供浏览器显示?我们做错了什么?
解决方案
这是一些工作代码,基于此示例和上面的@somethinghere 评论。注意如何response
处理getImage
:
function getImage(id) {
return fetch(`https://placekitten.com/200/140`, {
method: 'GET',
}).then(response => {
return response.blob(); // <- important
});
}
async function loadAndDisplay() {
let blob = await getImage();
let imageUrl = URL.createObjectURL(blob);
let img = document.createElement('img');
img.src = imageUrl;
document.body.appendChild(img)
}
loadAndDisplay()
也就是说,一个更简单的选择是插入一个类似的标签<img src=/images/id/data>
并将所有加载/显示留给浏览器。在这种情况下,您的后端必须提供正确的内容类型。
推荐阅读
- nasm - EMU8086 给错误的寄存器加值
- sql - 选择表的最后一行,Oracle 12c
- pie-chart - maximo 7.5 结果集中两种特殊情况的饼图
- bash - 为所有目录打印出单词“Directory”的 Shell 脚本
- mongodb - 无法从 Apache Camel MongoDb 组件中检索多个对象
- java - 在线java编译显示这样的错误
- php - 如何使用 PHP 在 1 个数组中收集 3 个数组?
- angular - 以角度从 JSON 文件加载数据时出错
- python - 如何将 Sanic 流对象插入 jinja 异步模板
- python - Selenium send_keys 复杂度