如何生成数据URI

Question

我最近了解到数据URI方案，并在维基百科上阅读了相关内容。

示例代码大致如下：

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

我的问题是：如何生成用于网站的代码（例如：iVBORw0KGgoAAAA...）？

注意：我特别想知道如何在没有服务器端脚本的情况下完成此操作。但是您仍然可以发布服务器端脚本的方法，以供其他人查看此问题。我还看到过一些可以为您完成此操作的网站，我该如何自己完成？

- L84

---

你可以在服务器端脚本语言中寻找base64编码功能，或者找到一些网站，允许你上传文件并返回图像的base64编码。还有元数据字符串（data:image/png;base64,），你需要使用一些MIME检测函数来获取MIME类型。 - nhahtdh

@Lynda：你想要实现什么目标？你有一个图像文件想要转换成数据URI吗（相对容易：请查看维基百科文章中的链接，了解“base64”）？或者你有一组原始像素数组想要转换成数据URI（难度较大）。还是其他什么需求？ - Managu

@Lynda：另外，当你说“我看过一些可以为你完成这个任务的网站，我如何自己完成？”时，你反对使用网站的哪一部分呢？你是想学习如何编写程序来创建数据URI吗？或者你只是不想通过网络发送图像进行转换，因此只需要一个独立的本地程序来完成转换？ - Managu

@Managu - 我更多的是好奇，但我有一些地方可能会受益。此外，网站的问题是我去过的前几个都被阻止了，警告可能存在恶意软件。一个独立的程序也不错，我不想写程序。 - L84

我使用了这个网站。效果很好 输入链接描述 - MemeDeveloper

Answer 1

以下是在Google Chrome浏览器中查看图片的一种很酷的方法:

1. 右键单击所需图片并选择检查元素(Inspect Element)
2. 右键单击该图片的URL(光标将变成手形)并选择在资源面板中打开链接(Open link in Resources Panel)
3. 右键单击资源面板中的图片并选择复制图像作为数据URL(Copy image as Data URL)
4. 粘贴数据URI到需要的位置

- Oran D. Lord

---

现在，“在资源面板中打开链接”被更名为“在源面板中显示”。 - alansiqueira27

Answer 2

如果从维基百科文章中不清楚，数据URI只是一种将文件（比如png）的全部内容塞入文本链接的方法。由于许多有趣的文件类型包含的数据并不表示为文本，该方案使用base64编码以在文本格式中表示可能的二进制数据的完整光谱。

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

- Managu

---

这很好地解释了数据URI的概念。 - Inder

Answer 3

我还不能发表评论，所以我会把这个作为新答案添加。

和Oran D. Lord's answer类似，这个方法在Firefox中应该可以实现：

1. 在Firefox中打开图片文件（或者打开包含图片的网页）。
2. 右键点击图片并选择“检查元素”。
3. 在检查器中，图片标签应该已经被突出显示。右键点击图片标签并选择“复制图像数据URL”（即使它可能不是真正的URL，但这是当前菜单项的名称）。
4. 将数据URI粘贴到需要的位置。

- Rainer Blome