如何生成数据URI

Question

我最近遇到了数据URI方案,并在维基百科上阅读它.

示例代码如下所示:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
          AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
          9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

我的问题是:你如何生成在iVBORw0KGgoAAAA...网站上使用的代码(IE :)？

注意:我特别关注如何在没有服务器端脚本的情况下完成此操作.但您仍然可以为可能遇到此问题的其他人发布服务器端脚本方式.我也见过网站会为你做这个,我怎么能自己做？

Answer 1

在Google Chrome浏览器中查看图片时,这是一种很酷的方式:

1. 右键单击相关图像,然后选择" 检查元素"
2. 右键单击图像的URL(光标将变为手形),然后在"资源"面板中选择" 打开"链接
3. 右键单击 "资源"面板中的图像,然后选择" 将图像复制为数据URL"
4. 将数据URI 粘贴到您需要的任何位置

Answer 2

如果维基百科文章中没有明确说明，数据 URI 只是将文件（例如 png）的全部内容推入文本链接的一种方式。由于许多有趣类型的文件包含不以文本形式表示的数据，因此该方案使用base64编码以文本格式表示所有可能的二进制数据。

此外，当浏览器从 Web 服务器检索文件时，Web 服务器会以MIME 类型的形式告诉浏览器该文件是什么类型。由于数据 URI 没有 Web 服务器（甚至没有文件名！）来标识文件类型，因此该信息必须包含在 URI 中。