"data:image/png;base64"是<img>标签中唯一的Base64编码吗？

Question

我一直在使用Java处理从网络上编码为base64字符串的图像。在img src标签中，我只看到过image/png格式，例如：data:image/png;base64,{eNc0d3d_St!ng...} 我没有看到过image/gif或image/jpg。我在SO上搜索了一下，并阅读了一些关于base64编码的内容。

此外，在Java（Android）中进行Base64.decode(src, Base64.DEFAULT)时，我会剥离掉data:image/png;base64 这部分，因此在这种情况下似乎不需要png。实际上，如果我不剥离这个“头”，那么BitmapFactory.decodeByteArray将返回null。

所以问题是，除了png之外，web上是否有其他格式用于图像编码？

- Rick

---

大多数图像（或其他二进制）文件格式，如PNG、GIF或JPEG，在文件开头包含一个唯一标识符（"magic"），用于唯一标识该格式。在这种情况下，“image/png”部分是冗余的，但对于可以使用数据URI方案表示的所有可能格式来说，情况可能并非如此。因此，它确实具有目的。另外，请记住，“;base64”部分是可选的，不要盲目将数据发送到Base64解码器。 - Harald K

谢谢您的评论，它解答了我关于这个主题的一些相关问题，并且也产生了一些新问题。 :) - Rick

Answer 1

是的，它们是：

data:image/gif

data:image/jpg

等等...

不仅仅是用于图片：

data:text/html

格式如下：

data:[<media type>][;charset=<character set>][;base64],<data>

请看这里：https://zh.wikipedia.org/wiki/数据十进制_URI

以及

http://dataurl.net/#about

- Rolando Corratge Nieves

Answer 2

不，你可以使用 gif、jpg 或浏览器可读取的任何类型的图像。例如：

<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

- Buzinas

---

也许这更适合作为一个单独的问题，但是：如果我在上面的代码中将image/png更改为image/gif，我得到相同的图像。我原以为会得到一个损坏的图像，但至少FF似乎无论声明的图像类型如何都会呈现相同的图像。 - Rick

一旦FF看到数据流是图像，它会查看“魔数”以确定它是哪种图像类型。 - Glenn Randers-Pehrson

Answer 3

异步/等待版本

const axios = require("axios");
const response = await axios.get("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Los_Colorines_4.jpg/320px-Los_Colorines_4.jpg", {
  responseType: "arraybuffer"
});
const base64 = Buffer.from(response.data, 'base64').toString('base64');
const base64ImageUrl = `data:image/gif;base64,${base64}`

演示：https://runkit.com/nickjanssen/axiosbase64image

- Nick