如何生成数据URI

Question

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

示例代码如下所示：

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

我的问题是：如何生成在网站上使用的代码（IE：iVBORw0KGgoAAAA...）？

注意：我特意在寻找没有服务器端脚本的方法。但您仍然可以为可能遇到此问题的其他人发布服务器端脚本方式。我也见过网站会为你做这个，我怎么能自己做？

Answer 1

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

1. 右键点击相关图片，然后选择检查元素
2. 右键点击图片的网址（光标将变为手），然后在资源面板中选择打开链接
3. 在资源面板中右键单击图像，然后选择将图像复制为数据网址
4. 在任何需要的地方粘贴数据URI

Answer 2

如果Wikipedia article中不清楚，则数据URI只是将文件的整个内容（例如，png）推送到文本链接中的一种方式。由于许多有趣类型的文件包含未表示为文本的数据，因此该方案使用base64编码以文本格式表示可能的二进制数据的全部范围。

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

Answer 3

（我还没有发表评论，所以我将其添加为新答案。）

与Oran D. Lord's answer类似，这应该适用于Firefox：

1. 在Firefox中打开图像文件（或打开带有图像的网页）。
2. 右键单击图像，然后选择“检查元素”。
3. 在检查器中，现在应突出显示图像标记。右键单击图像标记，然后选择“复制图像数据URL”（即使它可能不是URL，也就是当前调用的菜单条目）。
4. 将数据URI粘贴到您需要的任何位置。

Answer 4

在做了一些阅读之后，我遇到了一个与我信任的网站链接的website。运行良好，并为我提供插入HTML，CSS和原始数据的代码。我找到了非常好的和最好的方法。请注意，我为数据URI生成而访问的某些网站因Google或AVG的恶意软件而被阻止。这个one似乎没问题。