使用Deno的橡木包显示base64图像

Question

我的数据库中存储了一个base64编码的图像，所以开始看起来像这个data:image/png;base64,iVB..，我在"image"端点从数据库返回它。

当然，我可以使用JavaScript获取内容，并将base64字符串包含为img源，它会很好地渲染，但我也希望能够在使用浏览器访问端点时查看图像。我尝试过不同的头球组合，但都做不好。

如何使用Oak渲染base64图像？

编辑：

这是我最终使用的代码，对于任何感兴趣的人来说！

const getImage = async (
{ params, response }: { params: { id: string }; response: Response },
) => {
// Get the image using the ID from the URL
const image = await imageDatabase.findOne({ _id: ObjectId(params.id) });
// If there is no image found
if (!image) {
response.status = 404;
return;
}
// Return the image to the user
const semicolonIndex = image.base64!.indexOf(';')
const colonIndex = image.base64!.indexOf(':')
const commaIndex = image.base64!.indexOf(',')
const imageSize = image.base64!.slice(colonIndex + 1, semicolonIndex);
const imageData = image.base64!.slice(commaIndex + 1);
response.headers.set('Content-Type', imageSize)
response.body = base64.toUint8Array(imageData)
};

Answer 1

HTTP不支持base64图像内容。您应该对其进行解码并返回内容类型。

const images: any = {
beam: 'data:image/png;base64,<base64-string>',
google: 'data:image/png;base64,<base64-string>',
}
router.get('/image/:id', ctx => {
if (ctx.params && ctx.params.id && ctx.params.id in images) {
const image: string = images[ctx.params.id]
const colonIdx = image.indexOf(':')
const semicolonIdx = image.indexOf(';')
const commaIdx = image.indexOf(',')
// extract image content type
ctx.response.headers.set('Content-Type', image.slice(colonIdx + 1, semicolonIdx))
// encode base64
ctx.response.body = base64.toUint8Array(image.slice(commaIdx + 1))
}
})

要查找完整代码，请参阅github 上的代码

或者你可以直接运行我的样品

deno run -A https://raw.githubusercontent.com/XDean/StackOverflow/master/src/main/deno/Q66697683.ts