5

我最近遇到了 Data URI 方案，并且正在Wikipedia上阅读它。

示例代码如下所示：

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

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

注意：我正在专门寻找如何在没有服务器端脚本的情况下完成此操作。但是您仍然可以为可能遇到此问题的其他人发布服务器端脚本方式。我也看到过可以为你做这件事的网站，我自己怎么做？

4

4 回答 4

7

在 Google Chrome 中查看图像时，这是一种很酷的方法：

  1. 右键单击有问题的图像并选择检查元素
  2. 右键单击图像的 URL（光标将变成一只手）并选择在资源面板中打开链接
  3. 右键单击资源面板中的图像，然后选择将图像复制为数据 URL
  4. 将数据 URI粘贴到您需要的位置
于 2014-10-01T18:08:28.537 回答
2

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

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

于 2012-06-08T05:24:22.010 回答
1

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

类似于Oran D. Lord's answer，这应该在 Firefox 中工作：

  1. 在 Firefox 中打开图像文件（或打开带有图像的网页）。
  2. 右键单击图像并选择“检查元素”。
  3. 在 Inspector 中，图像标签现在应该突出显示。右键单击图像标签并选择“复制图像数据-URL”（即使它可能不是真正的 URL，这就是当前菜单项的名称）。
  4. 将数据 URI 粘贴到您需要的任何位置。
于 2015-10-21T16:04:53.913 回答
-2

在做了更多阅读之后，我发现了一个链接到我信任的网站的网站。效果很好，并为我提供了插入 HTML、CSS 和原始数据的代码。我发现的非常好的和最好的方法。但请注意，由于 Google 或 AVG 的恶意软件，我访问的一些用于生成数据 URI 的站点已被阻止。不过这个好像还可以。

于 2012-06-10T07:24:22.410 回答