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 并阅读了一些关于 base 64 编码的内容。

此外，我在 Java (Android) 中去掉了 data:image/png;base64 部分 Base64.decode(src, Base64.DEFAULT) 所以看起来在那种情况下不需要 png。事实上，如果我不剥离这个 "header" 那么 BitmapFactory.decodeByteArray returns null.

那么问题来了，网络上的图像编码除了png还有其他格式吗？

Answer 1

是的，他们是：

数据：image/gif

数据：image/jpg

等...

不仅是图像：

数据：text/html

格式如下

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

这里是 https://en.wikipedia.org/wiki/Data_URI_scheme

和

http://dataurl.net/#about

Answer 2

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

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

Answer 3

async/await版本

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

data:image/png;base64 是 img 标签唯一的 base64 编码吗？

Is data:image/png;base64 the only base64 encoding for the img tag?

javascript

base64

png

android

image