标签: data-uri

我在维基百科上看到这个:

数据URI不是单独缓存其包含的文档(例如CSS或HTML文件),因此每次重载时都会下载包含文档的数据.

这是否意味着每次刷新页面或用户点击导航链接时都会下载我的代码？我该怎么做才能缓存数据-uri？

ps - 我只是在谈论20个左右的小png文件(大多数是丝绸图标,但也有2*16KB文件)

我刚被告知使用数据URI发送图像的缩略图.我一直在搜索它,但我发现它基本上是文件的文本表示,可以直接在HTML中使用.我无法真正找到如何在Java中创建数据URI.我有一个文件的输入流.有人可以对此有所了解并指出我的方法来产生这个吗？

我有一个应用程序,生成网页作为数据URI.这些数据URI可能非常长.例如,我有一个页面,其数据URI长度为103,828个字符.关于应用程序的一切都有效,这没有问题,传递100,000个字符长的网址只是有点痛苦:P,所以我有一个疯狂的想法,试图使用URL缩短器来缩短这些URL.

好像有人写过这个:http://softwareas.com/the-url-shortener-as-a-cloud-database.作者提到了流行网址缩短服务的字符限制,最高似乎是微小的,大约65,000个字符.我只是想知道是否有人知道现有的解决方案/服务可以缩短这些长网址(超过100,000个字符)？

我很想实现自己的缩短器,但是如果存在允许这样做的东西,我想避免使用它.

我已经看到围绕这个跳舞的几个问题,所以我希望这不是多余的.理想情况下,我想要一个image/svg+xml可以扩展到100%容器的容器. Colorzilla让我有了一个很好的开始data:image/svg+xml

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
    <stop offset="100%" stop-color="#ff0000" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>

注意:width="100%" height="100%"我想采用这个渐变并旋转它,比如65deg HTML5 canvas API为我提供了一个很好的方法来构建这个图像,然后使用.toDataURL()PNG来填充IE8和IE7,但我想要一些可扩展的IE9 .

所以目标是复制这个:

background: linear-gradient(bottom, rgba(239, 239, 214,0) 0%, rgba(239, 239, 214,.8) 100%),
linear-gradient(left,  rgba(239, 239, 214,0) 60%,rgba(207, 223, 144,1) 100%),
linear-gradient(right, rgba(239, 239, 214,0) 0%,rgba(239, 239, 214,1) 60%), …

我requests用来从远程URL获取图像.由于图像总是16x16,我想将它们转换为base64,以便我可以稍后嵌入它们以在HTML img标记中使用.

import requests
import base64
response = requests.get(url).content
print(response)
b = base64.b64encode(response)
src = "data:image/png;base64," + b

输出response是:

response = b'GIF89a\x80\x00\x80\x00\xc4\x1f\x00\xff\xff\xff\x00\x00\x00\xff\x00\x00\xff\x88\x88"""\xffff\...

HTML部分是:

<img src="{{src}}"/>

但图像不显示.

我怎样才能正确地对64进行编码response？

背景故事:

• 目标:创建一个可以通过CSS应用的三角形阴影,并且与比例无关(即矢量,而不是光栅图像)
• 经过大量研究(我当然对替代方案开放)我选择使用SVG背景图像作为数据uri(以避免额外的HTTP请求).
• 我知道,这可以工作:http://jsfiddle.net/6WAtQ/

我被困在哪里:

• 我创建了一个简单的svg三角形,具有高斯模糊效果,如果它直接在HTML中编写(而不是CSS)svg完美运行:http://jsfiddle.net/RAKWB/

  <svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <polygon points="200,0 200,200 0,200" filter="url(#f1)"/> </svg>?

• 所以我尝试用我自己的三角形svg 复制上面的内容(http://jsfiddle.net/6WAtQ/),

• 我用'%23'替换了哈希标志,但没有骰子

• 这不起作用:http://jsfiddle.net/ZPWxK/1/

  body { background-image: url("data:image/svg+xml;utf8,data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>"); }

思考？

我有一个包含svg图像的文件,它是base64编码的(data-uri).该文件以.开头

数据:图像/ SVG + xml的; BASE64,PHN ....

如何将此解码为linux中的.svg文件？

此问题与旧浏览器中的如何更新(与Safari 5.1.4相关)有关并受其启发

给定一个<input type="file">具有元件files包含属性File从继承的对象Blob,是有可能创造一个ArrayBuffer和转换ArrayBuffer到一个data URI从一个Blob或File对象,而无需使用FileReader？

到目前为止已尝试过方法

• WebSocket使用.binaryTypeset 创建一个mock "arraybuffer",创建一个MessageEventwith event.dataset to Fileobject; 结果是处理程序的File对象onmessage

• 设置原型File为ArrayBuffer,Uint8Array; 结果是Uncaught TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #<ArrayBuffer>(),Uncaught TypeError: Method get TypedArray.prototype.byteLength called on incompatible receiver [object Object]()

• 设置File在 …

为什么资源有时嵌入数据URI中,而不是使用链接到存储为服务器上文件的资源的常规URI？

所以在我的应用程序中,用户可以选择将文件上传到<input type = "file" id = "my-file">(HTML 5文件输入).我随后可以使用以下Javascript获取此文件:

var files = $("#my-file").files;
var file = files[0];

我可以以某种方式使用这个var file作为data在<object>标签？下面是一个对象标记的示例,其中通过点击URL并联系服务器来抓取PDF.

<object data="data/test.pdf" /*<-- I want the var file here */ type="application/pdf" width="300" height="200">
</object>

我怎么能做到这一点？请注意,我必须支持Internet Explorer 11.

更新:

我尝试过最终以失败告终的事情.我使用FileReader将PDF转换为数据uri,然后data在<object>标记的属性中使用它,这在Chrome中完全呈现,但在Internet Explorer中根本不呈现.

var files = $(e.currentTarget.files);
file = files[0];
var reader = new FileReader();
reader.onloadend = function() {
    var data = reader.result;
    console.log(data);
    $("#content").prepend('<object id="objPdf" data="'+data+'" type="application/pdf"></object>');
};
reader.readAsDataURL(file);

读者数据出现的地方如下:

data:application/pdf;base64,JVBERi0xLjQKJe...

以下是PDF在Internet …