我想将数据导出为数据URI,只有当数据大小不超过当前浏览器支持的数据URI的最大大小时,才会将数据导出为我想要下载的文件.
document.location.href= "data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,"+data
当文件太大时,这有时会导致浏览器错误,但我希望在下载之前可以捕获错误(例如尝试其他方法).
如何在JS中获取最大数据URI大小？
我的服务器返回base64编码的图像,我想在某些事件上将其发送到客户端foo.我目前拥有它的方式是这样的:
index.html
...
<img src="{{data}}"></img>
...
controller.js
...
$scope.foo = function (result) {
$scope.data = result;
}
....
当foo发生时,result是一个base64编码的图像,并且该img元素开始渲染,如预期的那样.问题是,当页面最初加载时,/{{data}}将触发一个请求以获取图像和404. 当页面最初呈现时,如何避免此恶意请求被触发？如果不是我这样做的话,这样做的正确方法是什么？
以下html页面在最新版本的Chrome中创建了一个错误,该错误似乎相对较新:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test page</title>
</head>
<body id="body" >
<img src="data:image\png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJPSURBVDjLpZPLS5RhFMYfv9QJlelTQZwRb2OKlKuINuHGLlBEBEOLxAu46oL0F0QQFdWizUCrWnjBaDHgThCMoiKkhUONTqmjmDp2GZ0UnWbmfc/ztrC+GbM2dXbv4ZzfeQ7vefKMMfifyP89IbevNNCYdkN2kawkCZKfSPZTOGTf6Y/m1uflKlC3LvsNTWArr9BT2LAf+W73dn5jHclIBFZyfYWU3or7T4K7AJmbl/yG7EtX1BQXNTVCYgtgbAEAYHlqYHlrsTEVQWr63RZFuqsfDAcdQPrGRR/JF5nKGm9xUxMyr0YBAEXXHgIANq/3ADQobD2J9fAkNiMTMSFb9z8ambMAQER3JC1XttkYGGZXoyZEGyTHRuBuPgBTUu7VSnUAgAUAWutOV2MjZGkehgYUA6O5A0AlkAyRnotiX3MLlFKduYCqAtuGXpyH0XQmOj+TIURt51OzURTYZdBKV2UBSsOIcRp/TVTT4ewK6idECAihtUKOArWcjq/B8tQ6UkUR31+OYXP4sTOdisivrkMyHodWejlXwcC38Fvs8dY5xaIId89VlJy7ACpCNCFCuOp8+BJ6A631gANQSg1mVmOxxGQYRW2nHMha4B5WA3chsv22T5/B13AIicWZmNZ6cMchTXUe81Okzz54pLi0uQWp+TmkZqMwxsBV74Or3od4OISPr0e3SHa3PX0f3HXKofNH/UIG9pZ5PeUth+CyS2EMkEqs4fPEOBJLsyske48/+xD8oxcAYPzs4QaS7RR2kbLTTOTQieczfzfTv8QPldGvTGoF6/8AAAAASUVORK5CYII=" border="0">
</body>
</html>
错误是:无法加载资源:net :: ERR_INVALID_URL.但它看起来对RFC 2397有效吗？
我正在尝试从页面上的svg创建图像。但是，我无法svgToImage()在谷歌浏览器上使用该功能。我将浏览器切换为Firefox，所有生成的内容都没有任何问题。Firefox似乎会生成svg的不同base64表示形式，并且当该版本在google chrome中使用时，它可以工作，但该功能仍然无法创建图像。
查看一些调试日志，似乎Firefox将svg元素从<svg>变为<a0:svg>。这就是为什么这段代码在firefox中起作用的原因吗？如果是这样，是由于firefox修复而chrome忽略的名称空间不正确吗？
我已经发布了我用来测试的代码段。在chrome上，应该看到两个后盖，然后是残破的图像。在Firefox上，应该有三个黑匣子。
function svgToImage(target) {
// Works in firefox
// https://gist.github.com/Caged/4649511
var svg = document.getElementById(target);
var xml = new XMLSerializer().serializeToString(svg);
var data = 'data:image/svg+xml;base64,' + btoa(xml);
var image = new Image();
image.setAttribute('src', data);
document.body.appendChild(image);
}
//Generate another svg
svgToImage('aSVG');<svg width="100" height="100" id="aSVG" xmlns="http://www,w3.org/2000/svg">
<rect id="someId" x="70" y="70" width="15" height="20" fill="#000" rx="5" ry="5" />
</svg>
<!-- generated from firefox -->
<img src="data:image/svg+xml;base64,PGEwOnN2ZyB4bWxuczphMD0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LHczLm9yZy8yMDAwL3N2ZyIgaWQ9ImFTVkciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIj4KCQkJPGEwOnJlY3Qgcnk9IjUiIHJ4PSI1IiBmaWxsPSIjMDAwIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMTUiIHk9IjcwIiB4PSI3MCIgaWQ9InNvbWVJZCIvPgoJCTwvYTA6c3ZnPg==" ></img>HTML图像元素具有以下简化格式:
<img src='something'>
那可能是data-uri,例如:
data:image/png;base64,iVBORw0KGg...
有没有一种标准的方法来解析这个python,所以我得到content_type和base64数据分开,或者我应该为此创建自己的解析器？
在节点服务器上，我想将上传的datauri数据另存为图像。为此，我尝试了解码此png-的内容
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAFlEcHbAAAAB3RJTUUH1gMWFjk7nUWcXQAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAAeSURBVHjaY7h79y7DhAkTGIA04/Tp0xkYGJ49ewYAgYwLV/R7bDQAAAAASUVORK5CYII=
并将其保存为.png扩展。看起来还有更多。如何解码datauri并将其保存为文件？
我最近遇到了数据URI方案,并在维基百科上阅读它.
示例代码如下所示:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
我的问题是:你如何生成在iVBORw0KGgoAAAA...网站上使用的代码(IE :)？
注意:我特别关注如何在没有服务器端脚本的情况下完成此操作.但您仍然可以为可能遇到此问题的其他人发布服务器端脚本方式.我也见过网站会为你做这个,我怎么能自己做？
我有一个基于Web的应用程序,并正在寻找一种方法供用户从websql表下载他们的数据.有人建议使用数据URI,它似乎适用于除Internet Explorer之外的所有浏览器.我采取的方法是将所有数据存储在变量中,并使用text/csv MIME-Type和charset = UTF-8字符集编码:
document.location.href = 'data:text/csv;charset=UTF-8,' + encodeURIComponent(info);
但是,当我单击Internet Explorer 9中的链接时,它表示页面无法显示.任何想法如何在IE中工作？谢谢.
我的扩展程序中有一个按钮,触发以下代码:
chrome.tabs.create({url: 'data:text;base64,'+btoa(data), active:false});
这会触发我的字符串(数据)的下载,正如我预期的那样.不幸的是,它似乎正在剥离换行符.
我尝试过其他编码方法,包括utf-8和encodeUri()函数.我也尝试将mimetype切换为data:text/plain,但只是在新选项卡中打开(使用正确的换行符)而不是下载.
有没有办法对我的文本进行编码,以便保留换行符？如果没有,是否有不同的方法在浏览器中触发文件下载？
编辑
我发现新行确实出现在一些文本编辑器中.以前,我使用的是notepad,它不能识别chrome中的换行符,但我的其他文本编辑器(记事本++)似乎确实认出了它们
我有这个非常简单的HTML：
<a download="red.png"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">
Static
</a>
在Chrome或Firefox中，它会red.png按预期下载。
在IE中，它导航到错误页面。在JSFiddle上看到它。
现在，我知道downloadIE中不支持该属性，这很好。我仍然希望它能够导航到“文件”，从而允许用户保存它。相反，它导航到错误页面。
有办法解决这个问题吗？数据URI是在客户端生成的；在服务器上创建文件不是一种选择。
编辑：MSDN说：
出于安全原因，数据URI仅限于下载的资源。数据URI不能用于导航，脚本编写或填充frame或iframe元素。
...我读为“即使其他所有浏览器都支持此功能，我们也不知道该怎么做”。因此，仍在寻找一种变通方法来下载在客户端上生成的文件。