问题标签 [data-uri]

例如，如果您点击链接：

data:application/octet-stream;base64,SGVsbG8=

浏览器将提示您下载一个文件，该文件由超链接本身中以 base64 格式保存的数据组成。有没有办法在标记中建议默认名称？如果没有，是否有 JavaScript 解决方案？

我正在查看油脂猴用户脚本的来源，并在他们的 css 中注意到以下内容：

我可以理解，greasemonkey 脚本希望将它可以在源中捆绑的任何内容，而不是将其托管在服务器上，这很明显。但由于我以前没有见过这种技术，所以我考虑了它的用途，它似乎很有吸引力，原因有很多：

1. 它将减少页面加载时的 HTTP 请求数量，从而提高性能
2. 如果没有 CDN，那么它将减少通过与图像一起发送的 cookie 产生的流量
3. CSS文件可以被缓存
4. CSS 文件可以 GZIPPED

考虑到 IE6（例如）在缓存背景图像方面存在问题，这似乎不是最糟糕的主意......

那么，这是一个好还是坏的做法，你为什么不使用它，你会使用什么工具对图像进行 base64 编码？

更新 - 测试结果

• 图像测试：http ://fragged.org/dev/map-shot.jpg - 133.6Kb

• 测试网址： http: //fragged.org/dev/base64.html

• 专用 CSS 文件： http ://fragged.org/dev/base64.css - 178.1Kb

• GZIP编码服务器端

• 发送到客户端的结果大小（YSLOW 组件测试）：59.3Kb

• 保存发送到客户端浏览器的数据：74.3Kb

不错，但我猜它对于较小的图像的用处会稍微小一些。

更新： Bryan McQuade 是 Google 的一名软件工程师，负责 PageSpeed，他在 ChromeDevSummit 2013 上表示，CSS 中的 data:uris 在他的演讲中被认为是一种渲染阻塞反模式，用于提供关键/最小的 CSS #perfmatters: Instant mobile web apps。请参阅http://developer.chrome.com/devsum​​mit /sessions并记住这一点 -实际幻灯片

我正在考虑制作一个任何人都可以从浏览器访问的完全基于 JavaScript 的 zip/unzip 实用程序。他们只需将 zip 文件直接拖到浏览器中，就可以下载其中的所有文件。他们还可以通过拖动单个文件来创建新的 zip 文件。

我知道在服务器端做会更好，但这个项目只是为了好玩。

如果我利用各种可用的方法，将文件拖入浏览器应该很容易。（Gmail 风格）

编码/解码应该没问题。我看过一些 as3 zip 库，所以我相信我应该没问题。

我的问题是最后下载文件。

这在 Firefox 中运行良好，但在 Chrome 中不行。

我可以使用 将文件作为图像嵌入到 chrome 中<img src="data:jpg/image;ba.." />，但这些文件不一定是图像。它们可以是任何格式。

谁能想到另一种解决方案或某种解决方法？

如何在 Canvas 中打开图像？这是编码的

我正在使用

输出是编码的 base 64 图像。如何在画布上绘制此图像？

我想使用strDataURI 并创建图像？有可能吗？
如果不是，那么在画布上加载图像的解决方案可能是什么？

考虑以下（脆弱的）JavaScript 代码：

问题

• 图像的宽度和高度是否应该立即正确？
• 画布绘制应该立即工作吗？
• 是否应该onload调用回调（在更改 src 后设置）？

实验测试
我用类似的代码创建了一个简单的测试页面。在 Safari 中，我的第一个测试是在本地打开 HTML 页面（file:///url）并从我的服务器加载它，显示一切正常：高度和宽度正确，画布绘制工作，并且也onload触发。

在Firefox v3.6 (OS X) 中，启动浏览器后加载页面显示设置后立即显示高度/宽度不正确，drawImage()失败。（但是，onload处理程序确实会触发。）但是，再次加载页面会显示宽度/高度在设置和drawImage()工作后立即正确。看起来 Firefox 将数据 URL 的内容缓存为图像，并在同一会话中使用时立即可用。

在 Chrome v8 (OS X) 中，我看到与 Firefox 中相同的结果：图像无法立即使用，但需要一些时间从数据 URL 异步“加载”。

除了以上浏览器的工作或不工作的实验证明之外，我真的很喜欢关于它应该如何表现的规范的链接。到目前为止，我的 Google-fu 还没有完成这项任务。

安全
起见对于那些不明白为什么上述内容可能很危险的人，请知道您应该使用这样的图像以确保安全：

我已经尝试了所有可能的方式来使用 base64 字符串显示图像。但他们都没有工作。我在 IE6,7, Firefox 3 上测试过。请告诉我下面的代码有什么问题。

我在维基百科上读到这个：

数据 URI 不会与其包含的文档（例如 CSS 或 HTML 文件）分开缓存，因此每次重新下载包含的文档时都会下载数据。

这是否意味着每次刷新页面或用户单击导航链接时都会下载我的代码？我可以做些什么来缓存数据uri？

ps - 我只是在谈论 20 个左右的小 png 文件（主要是丝绸图标，但也有 2 * 16KB 文件）

将数据 URI用于图像的可靠方法是什么？我知道 IE6/7 不支持它们，所以这行得通吗？

1. 我默认使用图像的数据 URI
2. 如果浏览器是 IE6/7，它会使用 javascript 显示图像（不是数据，而是实际图像）
3. 将图像（不是数据）包含在<noscript>.

我的问题是：<noscript>即使浏览器支持 javascript 和数据 URI，也会获取图像吗？

当我尝试通过 JavaScript （来自这个问题）设置图像以使用数据 url 时，它似乎在 IE8 中不起作用。

第一个链接中的页面具有：<img id="foo" src="alphaball.png">
在第 25 行，此 JavaScript 代码执行：document.getElementById('foo').src = img_src;

在所有其他浏览器（包括 IE9b）上，这成功地将图像从字母球更改为我的头像。在 IE8 上，我非常短暂地看到了字母球，然后它被替换为丢失的图像图标。

这是一个已知的问题？是否有在 IE8 和 JavaScript 中使用数据 url 的解决方法？

我创建了一个供 Android 和 iPhone 设备使用的移动 Web 应用程序，经过测试，我很高兴一切正常，因此决定尝试对其进行一些优化。

我决定在我的 css 文件中使用数据 uri，因为所有图像都是 16x16px 的小 png 图像。

使用通过 WiFi 连接到 Internet 的 iPhone 进行测试时，图像可以正常加载，但是使用移动数据连接进行连接时，图像不会加载。

查看 Apache 错误日志，我看到由于某种原因，图像被请求为文件（并且没有被找到），尽管使用 WiFi 没有错误......

我使用的CSS如下...

我已经尝试了所有我能做的事情，不使用 css 速记/使用 css 速记，不同的 mime 类型，不使用 Google Minify，但都无济于事。但这仍然不能解释为什么这一切都可以在 WiFi 上完美运行。

Android 设备也可以与 Firefox、Chrome 和桌面版 Safari 一样完美运行。此外，在加载实际的 PNG 图像文件（与使用数据 URI 嵌入图像相反）时，图像加载良好。

如果有人能对此有所了解，我将永远感激不尽，大多数事情我都能解决，但这让我完全难过！