基本上问题在于标题.

很多人都有关于如何创建数据URI及其中的问题的stackoverflow问题.

我的问题是为什么要使用数据URI？

做的有什么好处:

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

做过:

<img src="dot.png" alt="Red dot" />

我知道服务器端的开销较小(可能),但使用数据URI的真正优点/缺点是什么？

我想base-64编码PNG文件,将其包含在我的样式表中的数据:url中.我怎样才能做到这一点？

我在Mac上,所以Unix命令行上的东西会很好用.基于Python的解决方案也很棒.

我正在写一个chrome扩展,它执行以下操作:

1. 使用将文件从网站下载到内存 XMLHttpRequest
2. 向文件添加其他数据,然后base64将结果编码为变量 total_encoded_data
3. 使用提供数据给用户<a href=data:application/octet-stream;charset=utf-8;base64,' + total_encoded_data+' download='file.bin'>Click to Download</a>.当total_encoded_data添加使用jQuery HREF.

我通过手动二进制搜索发现,如果大小total_encoded_data超过2097100个字符,那么当我点击链接时,我会收到一条Aw,Snap消息.如果尺寸较小,那么我可以按预期下载.

除了测试文件大小之外,我还用来atoi确保base64编码有效,并且它运行时没有错误.

Aw,Snap消息不会产生任何崩溃报告,chrome://crashes也不会产生任何意外输出chrome_debug.log

在提供base64编码的字符串长度大于2097100的数据uri时,如何避免Aw,Snap消息？

这是我的HTML:

<a>View it in your browser</a>
<div id="html">
    <h1>Doggies</h1>
    <p style="color:blue;">Kitties</p>
</div>

如何使用JavaScript来使href我的链接点的属性base64编码的网页,其来源是innerHTML的div#html？

我基本上想要在这里完成相同的转换(选中base64复选框),但在JavaScript中除外.

我有一个网页,可以快速从服务器流式传输JSON并显示其中的一些内容,大约10次/秒.一部分是base64编码的PNG图像.我发现了几种不同的显示图像的方法,但是所有这些方法都会导致无限的内存使用.它在几分钟内从50mb上升到2gb.适用于Chrome,Safari和Firefox.没试过IE.

我首先通过查看Activity Monitor.app发现了内存使用情况 - Google Chrome渲染器进程不断地占用内存.然后,我看着Chrome的资源检查器(View> Developer> Developer Tools,Resources),我看到它被缓存的图像.每次我更改img src,或创建一个新的Image()并设置它src,Chrome缓存它.我只能想象其他浏览器也在做同样的事情.

有没有办法控制这个缓存？我可以把它关掉,或做鬼鬼祟祟的事情,这样就不会发生吗？

编辑:我希望能够在Safari/Mobile Safari中使用该技术.此外,如果有人有任何想法,我会对其他快速刷新图像的方法持开放态度.

这是我尝试过的方法.每个驻留在一个在AJAX完成时调用的函数.

方法1 - 直接src在img标记上设置属性

快速.显示得很好.泄漏就像疯了似的.

$('#placeholder_img').attr('src', 'data:image/png;base64,' + imgString);

方法2 - img用a 替换canvas,并使用drawImage

显示正常,但仍然泄漏.

var canvas = document.getElementById("placeholder_canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0); 
}   
img.src = "data:image/png;base64," + imgString;

方法3 - 转换为二进制并替换canvas内容

我在这里做错了 - …

问题

我正在创建多个图表,然后发送到服务器以创建PDF.这些数据可能会变大.

题

压缩图像数据并将其发送到服务器的最佳方法是什么

背景

我正在创建的图表相当复杂,为了省去自己的头痛,所有这些都被转换为生成base64数据uri的画布.目前,数据uri被发布到服务器以处理处理.对于小图表,发布信息可以相当大,大约400-600kb,对于最大图表,大小为12mb.

图表是可以操作/重新排序的组织结构图.

在将这些字符串发送回服务器之前是否有更好的压缩方法？

研究

我看过的一些东西:

https://github.com/brunobar79/JIC/blob/master/src/JIC.js(看起来不像只是调整大小的选项)

http://pastebin.com/MhJZBsqW(看起来很有趣)

但是引用了我找不到的外部库: C_H_Image Lib_MinifyJpeg

https://code.google.com/p/jslzjb/source/browse/trunk/Iuppiter.js?r=2(看起来这可行,但依赖于服务器端的解压缩)

除了Microsoft Edge之外,这个简单的代码可以在任

<a href="data:text/plain;charset=utf-8,Test">link</a>

[的jsfiddle]

在Microsoft Edge中我得到"那很奇怪......微软找不到这个页面"错误:

Mozilla文档中的示例也不能使用相同的结果.

这是Edge控制台的输出:

打开新边缘窗口时会出现此错误,在新选项卡上将其data:text/plain;charset=utf-8,Test作为搜索查询输入 到默认搜索引擎中.

似乎Microsoft Edge没有定义 data:

有谁知道解决这个问题？

更新:遗憾的是,似乎无法在IE/Edge中的链接中使用数据URI.我已经创建了关于在链接中检测数据URI支持的相关问题:检测与Modernizr支持的链接中的数据URI

我试图以下列方式使用数据uri下载文件:

<input type="button"
  onclick="window.location.href='data:Application/octet-stream;content-disposition:attachment;filename=file.txt,${details}'"
  value="Download"/>

问题是下载的文件总是被命名为"未知",无论我尝试用作文件名.这是给文件命名的正确方法吗？或者其他什么需要做？

我正在Django制作一个Web应用程序,将用户的图像发送到他们的电子邮件中.

发送图像对我来说最吸引人的方式是数据:uri格式.

但是,我测试了发送此电子邮件的数据:uri图像到我的GMail帐户,电子邮件显示,但没有图像!

我知道Chrome和Firefox都可以打开数据:uri图像.所以这不是浏览器问题.但我没有看到数据:在GMail中的uri图像.

GMail不支持数据:uri图像？或者我可能发错了？

可能是一个愚蠢的问题,但是可以将数据URI转换回SVG吗？我用谷歌搜索和搜索了SO,并没有发现任何关于这个主题,当然在其他方面没有任何东西.

谢谢!

编辑:抱歉应该更具体 - 一个数据:这样的图像:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA4MCI+PHBhdGggZmlsbD0iIzFBMzc2MSIgZD0iTTE3Ljc4IDI1LjY1Yy44OS0uODkgMi4zNS0uODkgMy4yNSAwTDQwIDQ0LjU5bDE4Ljk3LTE4Ljk1Yy44OS0uODkgMi4zNS0uODkgMy4yNCAwbDIuNDMgMi40M2MuODkuODkuODkgMi4zNSAwIDMuMjVMNDEuNjIgNTQuMzVjLS45Ljg5LTIuMzUuODktMy4yNSAwTDE1LjM1IDMxLjMzYy0uODktLjg5LS44OS0yLjM1IDAtMy4yNWwyLjQzLTIuNDN6Ii8+PC9zdmc+