Questions tagged «data-uri»

我一直在查看油脂猴子用户脚本的来源，并在他们的CSS中注意到以下内容： .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} 我可以理解，滑脂脚本希望将其可以捆绑的所有内容捆绑在源代码中，而不是将其托管在服务器上，这很明显。但是由于我以前没有看过这种技术，因此我考虑了它的使用，并且由于许多原因，它似乎很有吸引力： 它将减少页面加载时的HTTP请求数量，从而提高性能 如果没有CDN，则它将减少通过Cookie与图像一起发送而产生的流量 可以缓存CSS文件 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 不错，但是我猜它对较小的图像用处不大。 更新：Google软件工程师Bryan McQuade在PageSpeed上表示，他在ChromeDevSummit 2013上表示，CSS中的data：uris被认为是在演讲期间提供关键/最小CSS的渲染阻止反模式#perfmatters: Instant mobile web apps。请参阅http://developer.chrome.com/devsum​​mit/sessions，并牢记这一点- 实际幻灯片

475 css  base64  background-image  data-uri 

例如，如果您点击链接： data:application/octet-stream;base64,SGVsbG8= 浏览器将提示您下载一个文件，该文件包含超链接本身中以base64形式保存的数据。有什么办法可以建议标记中的默认名称吗？如果没有，是否有JavaScript解决方案？

225 javascript  html  url  data-uri  save-as 

我正在考虑制作一个完全基于JavaScript的zip / unzip实用程序，任何人都可以从浏览器访问该实用程序。他们只需将其zip直接拖到浏览器中，就可以下载其中的所有文件。他们还可以通过拖动单个文件来创建新的zip文件。 我知道最好在服务器端执行此操作，但是该项目只是为了使您开心一点。 如果我利用各种可用的方法，将文件拖放到浏览器中应该足够容易。（Gmail样式） 希望编码/解码应该可以。我已经看过一些as3 zip库，所以我确定我会满意的。 我的问题是最后下载文件。 window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' 这在Firefox中效果很好，但在chrome中效果不佳。 我可以使用chrome在chrome中将文件嵌入为图像<img src="data:jpg/image;ba.." />，但文件不一定是图像。它们可以是任何格式。 谁能想到其他解决方案或某种解决方法？

126 javascript  data-uri 

如何在“画布”中打开图像？被编码 我正在使用 var strDataURI = oCanvas.toDataURL(); 输出是已编码的base 64图像。如何在画布上绘制此图像？ 我要使用strDataURI 并创建图片吗？可能吗？ 如果不是，那么将图像加载到画布上的解决方案可能是什么？

112 image  html  canvas  data-uri 

我知道Data URI，其中base64可以内联使用编码数据（例如图像）。今天，我收到一封电子邮件，实际上是一封垃圾邮件，其中的主题中包含一个动画（gif）图标： 仅此一个图标： 因此，我唯一想到的就是数据URI，以及Gmail是否允许在主体中插入某种表情符号。我看到了电子邮件的完整详细版本，并在下图中指向主题行： 因此，GIF来自=?UTF-8?B?876Urg==?=类似于数据URI方案的编码字符串，但是我无法从中获取图标。这是元素HTML源代码： 长话短说，有很多表情从https://mail.google.com/mail/e/XXX哪里XXX是十六进制数字。他们没有记录在案，或者我找不到。如果这是关于数据URI的，那么如何将它们包含在Gmail的电子邮件主题中？（我将该电子邮件转发到yahoo电子邮件帐户，[?]而不是图标），如果不是，那么如何解析该编码字符串？

103 gmail  base64  data-uri 

数据URI是在HTML中嵌入图像和其他二进制数据的一种标准方法，并且在网络上有很好的文档说明了浏览器支持。（IE8是第一个支持Data URI的IE版本，每个URI的最大大小为32 KB；其他主流浏览器甚至更长久地支持它。） 我的问题是关于桌面电子邮件和Webmail客户端软件。 构建HTML电子邮件时，标准做法是将图像作为附件包括在内或从外部加载（即跟踪图像）。这两个都有缺点（某些客户端列出了所有这些附件文件，而许多客户端则正确地阻止或要求用户采取行动以查看外部图像）。因此，Data URI看起来是一种不错的方法，但前提是电子邮件阅读器支持它。 那么，有没有人链接到最近对该功能支持的研究？还是对此进行了调查？例如，这是CSS支持的概述。我感兴趣的客户端软件包括： 桌面（包括版本信息）：Outlook，Apple Mail，Thunderbird，Evolution，Lotus Notes，AOL，Eudora 网络邮件： Gmail，Live / Hotmail，Yahoo！邮件，AOL 手机： Android，iPhone

100 html  email  html-email  email-client  data-uri 

使用富文本编辑器，我们的用户可以将保存的图像从桌面拖放到编辑器中。他们提交后，该图像就会出现并正确显示在网页中。 由于图像未上传到任何地方，因此编辑器会将图像另存为base64编码的图像。 <img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFKCAIAAADKUQaBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhepP1p32zb 等等 但是它没有显示-没有在iPhone上，也没有在两个不同版本的Outlook中。图像被破坏了。我们希望坚持使用base64，因为它已经可以在网页上使用，并且能够在用户离线时查看图像。

85 email  base64  html-email  data-uri 

如何使用通过字符串（通过POST请求提供）创建Web Worker？ 我可以想到的一种方法（但我不确定如何实现）是通过从服务器响应创建数据URI，并将其传递给Worker构造函数，但是我听说有些浏览器不允许这是因为相同的原产地政策。 MDN指出围绕数据URI的起源策略的不确定性： 注意：作为Worker构造函数的参数传递的URI必须遵守同源策略。当前，浏览器供应商之间在数据URI是否具有相同来源方面存在分歧。Gecko 10.0（Firefox 10.0 / Thunderbird 10.0）及更高版本的确允许数据URI作为工作程序的有效脚本。其他浏览器可能会不同意。 这也是在whatwg上讨论它的帖子。

83 javascript  web-worker  data-uri 

考虑以下（脆弱的）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之后设置）？ 实验测试 …

75 javascript  html  image  data-uri 

问题背景：我正在使用katex在页面上渲染一些数学。然后，我想创建该页面一部分的PDF版本，因此我创建了一个HTML文档，其中包含要导出的部分，该部分内联所有CSS并将其传递给渲染器。渲染器无法访问节点资源，这就是内联所有内容的原因。除字体外，它运行完美。 我同时尝试了url-loader和bas64-inline-loader，但未内联生成的字体。我在调试器中检查了生成的CSS，并且旧的URL仍然存在，没有字体的data-URL。 这是我当前的webpack.config.js： const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', "json.worker": 'monaco-editor/esm/vs/language/json/json.worker', "css.worker": 'monaco-editor/esm/vs/language/css/css.worker', "html.worker": 'monaco-editor/esm/vs/language/html/html.worker', "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { globalObject: 'self', filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { …

10 javascript  css  webpack  data-uri