Image processing 如何生成数据URI

我最近遇到了数据URI方案，并在网上阅读了它

示例代码如下所示：

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

我的问题是：如何生成用于网站的代码（即：

iVBORw0KGgoAAAA…

）

---

注意：我特别关注的是如何在没有服务器端脚本的情况下实现这一点。但您仍然可以为可能遇到此问题的其他人发布服务器端脚本。我也看到一些网站会为你做这件事，我怎么能自己做呢

如果从中不清楚，那么数据URI只是将文件（比如png）的全部内容压缩到文本链接中的一种方式。由于许多有趣的文件类型包含未表示为文本的数据，因此该方案使用编码以文本格式表示可能的全部二进制数据

---

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

在进一步阅读之后，我遇到了一个从我信任的站点链接到的。很好地工作，并为我提供了插入HTML、CSS和原始数据的代码。这是我找到的最好的方法。不过要注意，我为生成数据URI而访问的一些网站由于谷歌或AVG的恶意软件而被阻止。不过这似乎没什么问题

在Google Chrome中查看图像时，这里有一个很酷的方法：

右键单击有问题的图像并选择检查元素

右键单击图像的URL（光标将变成一只手），然后在资源面板中选择打开链接

右键单击资源面板中的图像，然后选择将图像复制为数据URL

将数据URI粘贴到需要的任何位置

（我还不能对此发表评论，因此我将添加这一点作为新的答案。）

与此类似，这在Firefox中也适用：

在Firefox中打开图像文件（或打开带有图像的网页）

右键单击图像并选择“检查元素”

在Inspector中，图像标记现在应高亮显示。右键单击图像标记并选择“复制图像数据URL”（即使它可能不是真正的URL，这是菜单项当前的名称）

将数据URI粘贴到需要的任何位置

---

您可以在服务器端脚本语言中查找base64编码功能，也可以找到一些允许您上载文件并返回图像base64编码的网站。还有元数据字符串（

data:image/png；base64，

），您需要使用一些MIME检测函数来获取MIME类型。@Lynda:您想实现什么？您是否有一个要转换为数据URI的图像文件（相当简单：通过Wikipedia文章中的链接阅读“base64”）？可能您有一个原始像素数组，您希望将其转换为数据URI（要难得多）。还有别的吗？@Lynda：还有，当你说“我看到过一些网站可以为你做这件事，我怎么能自己做？”你反对使用网站的哪一部分？您是否希望学习如何编写程序来创建数据URI？也许相反，你不想通过网络发送图像进行转换，因此只需要一个独立的本地程序来进行转换？@Managu-我比任何东西都好奇，但我有几个地方可以从中受益。此外，网站的问题是，我访问的前几个网站被屏蔽，警告可能存在恶意软件。一个独立的程序也不错，我不想写一个程序。我用过这个网站。很好，谢谢，转换效果很好。即使没有启用JavaScript。