我知道您可以包括css和图像以及其他文件类型，这些文件已经以base64形式存储在javascript文件中。但是，它们相当庞大……并且压缩后，它们缩小了很多，即使有base64编码带来的〜33％的开销。
未压缩的图像是data：image / gif; base64，data：image / jpeg，data：image / png和css是data：text / css; base64。那么，我可以/应该使用哪种MIME类型来包含压缩的css或图像数据URI？（或者，如果gzip + base64无法正常工作，我还有其他压缩方法可以减小字符串的大小，同时仍将数据存储在javascript中吗？）
..edit ..我认为这个问题被误解了。我不问，如果我应包括在JavaScript中的base64 gzip压缩的字符串。是的，我知道在大多数情况下，最好在服务器端gzip javascript和其他文件。但这不适用于用户脚本；一个用户脚本没有服务器，并且只包含一个文件。Firefox允许使用@require指令，但是Opera和Chrome不允许使用，加载任何本地文件时，本地文件安全性问题也随之而来。因此，脚本所需的任何内容都必须是：1）在Web上（慢）或2）嵌入在用户脚本中（大）。
现在，这个问题假设大的比慢的更可取，但是大的并不一定意味着我们完全忽略了多大。如果可以更小，那就是一种改进。
因此，假设在JavaScript中嵌入了base64字符串，问题是如何使它变成有意义的东西。
要么：
1）atob（）可以在javascript中将原始base64编码的gzip转换为原始gzip。（atob不需要知道媒体类型）。然后的问题是如何解压缩原始的gszip css或图像文件，以便将结果输出输入文档中。
或2）给定正确的媒体类型，浏览器至少理论上（根据datauri RFC）应该能够直接从datauri加载任何文件。“”足以加载未压缩的CSS样式表。这里的问题是什么链接类型属性和datauri媒体类型组合应该起作用（以及它适用于哪些浏览器）？对于用户脚本，最好是可以在Opera，FF和Chrome中使用的组合。
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
value := token / quoted-string
根据来自RFC的这些BNF，将数据与mime类型分开的逗号实际上可以同时出现在mime类型和数据中，因此没有简单的方法（即reg ex）将URI分成多个部分。因此，需要一个完整的解析器。
我想知道有人知道Java中的任何数据URI库吗？我的Google搜索没有任何结果。
我试图为这一切寻找答案。这看起来很简单，但我缺乏 Javascript 知识（一直用 Java 编码）结合 Javascript 端的图像流转换使这很难。
我做了一个 REST 请求 url -https://<<host>:port/getPicture它产生一个image/jpeg流响应。
一旦我在 Chrome 浏览器中触发 URL - 图像就会正确呈现。它也在我的 angularJS 应用程序中呈现 - 通过 ng-src 标签，例如<img ng-src="url"/>
但是，当我尝试将原始数据设置为 ng-src 标签时，它似乎不起作用。在进一步阅读时，我了解到 ng-src 不接受原始图像数据，但需要转换为 base64String 以用作 DataURI。我试图到处查找文章将原始图像数据（JFIF格式）转换为DataURI，但没有成功。
下面显示的是响应原始数据的外观（我在浏览器中打开它，它呈现完美）。
问题 - 1. 原始数据是什么格式？二进制流还是字节数组？或者是什么？2. 如何在 Javascript 中将其转换为 DataURI 以便它可以链接到我的 ng-src 标签？
请你帮我解决这个问题。看起来很简单，但现在花了我一个星期，让我发疯！！
????JFIF``??C
$.' ",#(7),01444'9=82<.342??C
2!!22222222222222222222222222222222222222222222222222???|"??
???}!1AQa"q2???#B??R??$3br?
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz???????????????????????????????????????????????????????????????????????????
???w!1AQaq"2?B???? #3R?br?
$4?%?&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz????????????????????????????????????????????????????????????????????????????4???)????4??D,>W?}jLsI??Y~{?a??6??b?'??I?Fj?+??K?R
?dhr=???4???????+R~S???Zq?>?g ?5V?_??[?y??(,??????2?$?Z@(??K??I?|Ro??G#???K????pM7|7w??I???Q@??)??J??jIeo?????Z?????9??8?a????[W%?r??F2E4Es?e??/??????]??i?92?Pf????yo??O??n???9f?]?;W?=zRt????*}Z{??P!???YEt?s?!???s???zR?EQdP?]\??b?@?????Q??????d??k??t?&?Nk?L??@f?&?>Ê?u???????????`???-?s?/ ????F?p)?f?c?(aLd?p?I?I??7Rr=h??i????2=?2?4???P??'?3?*????%??*]??`Q???&G?+??5?E??Mu2F????E???j?p?????_?qp????^?V??????^??????b?'l?E/??'???
如何在没有SVG被Base64编码的情况下使用Stylus预处理器在CSS中嵌入SVG数据uri ？
像这样:
background: url('data:image/svg+xml;utf8,<svg>[...]</svg>');
而不是这个:
background: url('data:image/svg+xml;base64,PD94bWwg[...]');
Normaly我曾经习惯stylus.url()嵌入图像,但它也会使用Base64编码SVG.
我想使用数据uris而不是外部文件来保存文件请求.我已经意识到Base64编码SVG实际上增加了字节而不是减小大小.
我找不到按原样嵌入SVG的方法.
我有一个 CSV 数据
column1,column2,column3
data1,data2,data3
data1,data2,data3
我把它作为一个 Jade 变量，它和 HTML 中的内插字符串一样好，我让它可以通过a数据 URI 格式的链接下载
column1,column2,column3
data1,data2,data3
data1,data2,data3
var link = document.getElementById('link');
var data = 'column1,column2,column3\n\rdata1,data2,data3\n\rdata1,data2,data3';
link.href = 'data:text/csv,' + data;我已经使用 Javascript 在此处插入数据以进行演示，但实际上我在服务器端使用 Jade :（我认为这并没有什么不同......）
a(href="data:text/csv,#{data.replace(/[\r\n]/, '\r\n')}" download="data.csv") Download
问题是换行符不起作用。当我下载文件时，它没有换行符。
事实上维基说
在 Mozilla Firefox 5、Google Chrome 17 和 IE 9（2011 年 6 月发布）中，编码数据不得包含换行符。
这是另一个问题，如果我没有误解，确实表明这是可能的。
是否真的不可能为数据 URI 格式的 CSV 下载换行，或者有没有我可能错过的方法？
在我的网站上，我正在上传图像并需要返回该图像的数据 URI，但我无法弄清楚如何这样做（它必须是服务器端）。
我尝试了以下代码，但它似乎对文件名进行了编码。
@RequestMapping(value="/path/toDataURL", method=RequestMethod.POST, headers = "content-type=multipart/form-data")
public @ResponseBody String uploadMultipart(HttpServletRequest request, HttpServletResponse response, @RequestParam("file") MultipartFile multiPart) {
try {
return "data:image/png;base64," + Base64.encodeBase64(multiPart.getBytes());
} catch (IOException e) {
e.printStackTrace();
}
return "";
}
如何获取图像的数据 URI？
我想生成由标签和图标组成的图像.标签部分会有很多变化(50-100),而大约有10个图标.我想通过将最终图像分成两部分,即标签图像和图标图像,以模块化方式制作最终图像.我将构建一个服务,返回标签的dataURI,同时将图标dataURI嵌入页面中.然后我想结合这两个不同的dataURI来创建一个表示组合图像的dataURI.
我怎样才能在客户端这样做？
我有一个用 base64 编码的图像，我需要以同步方式在画布上绘制它。看看我的这段代码：
//convert base64 to actual Image()
var input = new Image();
input.src = dataurl;
//draw on canvas
var w = input.width, h = input.height;
canvas.width = w; canvas.height = h;
ctx.drawImage(input, 0, 0)
这曾经适用于 Chrome。我知道假设浏览器能够在下一条指令之前完成加载不是一个好习惯，但它确实有效。后来经过几次更新，终于失败了。
我无法侦听load事件，因为这会使其异步，这不好，因为这是一个生成器函数，我需要同步返回画布。该程序是围绕它构建的，使其异步意味着完全重写。这不好。
试图
input.src = dataurl;
while(!input.width){ /* busy wait */ }
var w = input.width, h = input.height;
不起作用，因为浏览器不会在我的代码完成执行之前更新它。
现在我真的想不出任何方法来解决这个困境，所以任何输入都值得赞赏。（请注意，datauri 是从另一个画布生成的，我确实可以访问。）
除浏览器嗅探外,有没有办法确定浏览器是否支持使用数据URI进行超链接？
这是上下文:
我创建一个链接,要么下载使用一个方便的数据URI或者,通过JavaScript产生,如果浏览器不支持使用数据URI的超链接信息的CSV文件,生成所需内容的HTML表格.
现在我的代码检查window.URL属性的存在,这在IE9及以下版本中不存在.(现在这个工作正常,因为我需要支持的IE用户在兼容模式下运行,模拟IE8.)
if(window.URL){
downloadLink.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
downloadLink.setAttribute("download","download.csv");
}else{
downloadLink.href= "#";
downloadLink.innerHTML = "table view";
downloadLink.onclick = function(){
// build and display HTML table
return false;
};
}
然而,有一个与在Internet Explorer中的新版本(10,11,以及边缘),它们支持的window.URL对象但有一些重叠不会允许数据URI的超链接.
如何确保下载CSV的链接永远不会显示给不支持此类功能的浏览器？
html javascript internet-explorer data-uri browser-feature-detection
我在Webpack工作流程中使用SVG遇到很多麻烦。我正在尝试使其与background: url(sample.svg)CSS中的属性一起显示。单独使用它是行不通的，因此我认为我已经使用了装载程序。这是我使用的步骤。
我使用svg-url-loader加载了SVG。
1.
我svg-url-loader通过npm 安装并将其添加到我的module.exports：
{
test: /\.svg/,
use: {
loader: 'svg-url-loader'
}
},
2. 我将其添加到index.js文件的顶部：
require('svg-url-loader!./images/topography.svg');
3.
我background-image在我的CSS中添加了SVG路径：
body {
background-image: url("../images/topography.svg");
background-size: 340px, auto;
min-height: calc(100vh - 100px);
margin: 50px;
background-attachment: fixed;
letter-spacing: -1px;
}
4. SVG未呈现到页面。当我在浏览器中检查身体时，我发现：
background: url(data:image/svg+xml,module.exports = __webpack_public_path__ + '8dccca4….svg';);
我对data-uri不太了解，所以也许我遇到了这个问题。
另外，我尝试使用不同的SVG文件进行了此操作，但它们均无效。