标签: data-uri

我正在查看一个greasemonkey用户脚本的来源,并在他们的css中注意到以下内容:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

我可以理解,一个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正在研究PageSpeed,他在ChromeDevSummit 2013上表达了数据:CSS中的uris被认为是一种渲染阻止反模式,用于在他的演讲中提供关键/最小的CSS #perfmatters: Instant mobile web apps.请参阅http://developer.chrome.com/devsum​​mit/sessions并记住这一点 - 实际幻灯片

例如,如果您点击链接:

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

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

我知道数据URI,其中base64编码数据可以内联使用,如图像.今天我收到的电子邮件实际上是垃圾邮件,其主题中有一个动画(gif)图标:

这是仅图标:

因此,我唯一想到的就是关于数据URI以及Gmail是否允许在主题中插入某种表情符号.我看到了电子邮件的完整详细版本,并在下图中指出了主题行:

所以GIF来自=?UTF-8?B?876Urg==?=编码字符串,类似于数据URI方案但是我无法从中获取图标.这是元素HTML源:

长话短说,有很多表情从https://mail.google.com/mail/e/XXX哪里XXX是十六进制数字.他们没有记录在案,或者我找不到它.如果这是关于数据URI,那么如何将它们包含在Gmail的电子邮件主题中呢？(我将该电子邮件转发到雅虎电子邮件帐户,[?]而不是图标),如果不是,那么该编码字符串是如何解析的？

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

我正在使用

var strDataURI = oCanvas.toDataURL(); 

输出是编码的基础64图像.如何在画布上绘制此图像？

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

数据URI是在HTML中嵌入图像和其他二进制数据的标准方法,浏览器支持在Web上有详细记录.(IE8是支持数据URI的IE的第一个版本,每个URI最大为32 KB;其他主流浏览器支持它的时间更长.)

我的问题是关于桌面电子邮件和webmail客户端软件.

在构建HTML电子邮件时,标准做法是将图像作为附件包含在内或将其加载到外部(即跟踪图像).这两个都有缺点(一些客户列出所有这些附加文件,而许多客户正确阻止或要求用户操作以查看外部图像).因此,数据URI看起来是一种很好的方式,但前提是电子邮件阅读器支持它.

那么,是否有人链接到最近支持此功能的研究？或者根本调查过这个？例如,这里是CSS支持的概述.我感兴趣的客户端软件包括:

桌面(包括版本信息):Outlook,Apple Mail,Thunderbird,Evolution,Lotus Notes,AOL,Eudora

Webmail: Gmail,Live/Hotmail,Yahoo!邮件,美国在线

手机: Android,iPhone

使用富文本编辑器,我们的用户可以将保存的图像从桌面拖放到编辑器中.提交后,图像会在网页中显示并正确显示.

由于图像不会上传到任何地方,因此编辑器会将图像保存为base64编码的图像.

<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFKCAIAAADKUQaBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhepP1p32zb

等等

但它没有出现 - 不是在iPhone上,也不是两个不同版本的Outlook.图像很简单.我们希望坚持使用base64,因为它已经在使用网页,并且能够在用户离线时查看图像.

如何使用从字符串创建Web worker(通过POST请求提供)？

我能想到的一种方法,但我不确定如何实现它,是通过从服务器响应创建数据URI,并将其传递给Worker构造函数,但我听说有些浏览器不允许这,因为相同的原产地政策.

MDN陈述围绕数据URI的原始政策的不确定性:

注意:作为Worker构造函数的参数传递的URI必须遵循同源策略.目前,浏览器供应商对数据URI是否来源不一致存在分歧; Gecko 10.0(Firefox 10.0/Thunderbird 10.0)及更高版本确实允许数据URI作为工作人员的有效脚本.其他浏览器可能不同意.

这里还有一篇关于whatwg讨论它的帖子.

考虑以下(脆弱的)JavaScript代码:

var img = new Image;
img.src = "data:image/png;base64,..."; // Assume valid data

// Danger(?) Attempting to use image immediately after setting src
console.log( img.width, img.height );
someCanvasContext.drawImage( img, 0, 0 );

// Danger(?) Setting onload after setting src
img.onload = function(){ console.log('I ran!'); };

问题

• 图像宽度和高度应该立即正确吗？
• 画布应该立即开始工作吗？
• 是否应该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还没有完成任务.

安全玩耍
对于那些不明白为什么上面可能有危险的人,要知道你应该使用这样的图像是安全的:

// First create/find the …

我已经构建了一个图像滑块(基于极好的bxSlider),它会在滑入视图之前及时预加载图像.它已经很好用,但我不认为我的解决方案是有效的HTML.

我的技术如下:我生成滑块标记,第一张幻灯片图像像往常一样插入(带有<img src="foo.jpg">),后续图像在数据属性中被引用<img data-orig="bar.jpg">.然后Javascript data-orig -> src在必要时调整更改,触发预加载.

换句话说,我有:

<div class="slider">
    <div><img src="time.jpg" /></div> 
    <div><img src="data:" data-orig="fastelavn.jpg" /></div> 
    <div><img src="data:" data-orig="pels_strik.jpg" /></div> 
    <div><img src="data:" data-orig="fashion.jpg" /></div> 
</div>

为了避免空src=""属性(在某些浏览器中对性能有害),我插入了有效插入空白图像作为占位符.src="data:"

问题是,我似乎无法在文档中找到data-URI来说明这是否是一个有效的数据URI.我基本上想要解析为空白/透明图像的最小数据URI,因此浏览器可以立即解析src并继续(没有错误或网络请求).也许src="data:image/gif;base64,"会更好？

我有一个数据URI,我从javascript和尝试通过PHP保存.我使用以下代码,它给出了一个明显损坏的图像文件:

  $data = $_POST['logoImage'];

  $uri = substr($data,strpos($data,",")+1);

  file_put_contents($_POST['logoFilename'], base64_decode($uri));



data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs 9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAxklEQVQYlYWQMW7CUBBE33yITYUUmwbOkBtEcgUlTa7COXIVV5RUkXKC5AxU EdyZVD4kyKxkwIrr9vd0c7Oih aopinLNsF6Qkg2XW4XJ7LGFsAAcTV6lF5/jLdbALA9XDAXYfthFQVx OrmqKYK88/7rbbMFksALieTnzu9wDYTj6f70PKsp2kwAiSvjXNcvkWpAfNZkzWa/5a9yT7fdoX7rrB7hYh2fXo9HdjPYQZu3MIU8bYIlW20y0RUlXG2Kpv/vfwLxhTaSQwWqwhAAAAAElFTkSuQmCC

代码下面是作为Data-URI的实际图像.'logoImage'是上面的字符串,$ uri是字符串减去'image/jpeg; base64'.