使用 Deno 的 Oak 包显示 base64 图像

Question

我的数据库中存储了一个 base64 编码的图像，所以开头看起来像这样 data:image/png;base64,iVB.. 我 return 它来自我 'image' 端点的数据库。

我当然可以只使用 JavaScript 获取内容并将 base64 字符串作为 img 源包含在内，它会呈现得很好，但我也希望能够在以下情况下查看图像我使用浏览器转到端点。我尝试了不同 headers 的组合，但无法正常工作。

如何使用 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 图片内容。你应该用内容类型解码它和return。

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))
  }
})

要查找完整代码，请参阅 code on github

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

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

使用 Deno 的 Oak 包显示 base64 图像

Display base64 image with Deno's Oak package

deno

oak