我有一个Python的图像文件流:
\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x04\x87...
如何将其转换为数据URI？
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAU...'
今天早上我正在查看某人网站的实现,看到他们是通过LINK标签中的数据uri定义CSS.
我理解将图像放入数据库中的理性,包括CSS中的那些,但我不清楚为什么有人会选择以这种方式包含CSS,就像你可以轻松地进行内联一样.
我确实看到他们在链接中有一个ID.难道他们是从DOM动态抓取这个CSS然后用它来表示动态生成元素的"样式"的值吗？我不是前端运动员,但我相信还有其他方法可以做到这一点.
这是HTML:
<link id="noteanywherecss" media="screen" type="text/css" rel="stylesheet" href="data:text/css,.note-anywhere%20.closebutton%7Bbackground-image%3A%20url%28chrome-extension%3A//bohahkiiknkelflnjjlipnaeapefmjbh/asset/deleteButton.png%29%3B%7D%0A.note-anywhere%20%7Bbackground-color%3A%20%23FFF046%3B%7D%0A.note-anywhere%20%7Bcolor%3A%20%23000066%3B%7D%0A.note-anywhere%20%20.edit%20%7Bfont-family%3A%20Arial%2C%20Helvetica%2C%20sans-serif%3B%7D%0A.note-anywhere%20%20.edit%20%7Bfont-size%3A%2014px%3B%7D%0A.note-anywhere%20.timestamp%20%7Bbackground-color%3A%20%23DDBB00%3B%7D%0A.note-anywhere%20.timestamp%20%7Bcolor%3A%20%23FFFFFF%3B%7D">
以下代码只是HTML,CSS和JavaScript"注入"现有iFrame('iframe_id')的组合.虽然以下代码适用于Firefox,Chrome和Safari,但它在IE9中不起作用.我检查了一些相关的和现有的答案,其中大多数都与IE8或更早版本中的问题有关,这在这种情况下没有帮助.它与jQuery .attr()有关吗？IE9是否存在问题(如旧的IE版本)？如果是,我该如何解决？
$("#iframe_id").attr(
"src", "data:text/html;charset=utf-8," +
"<!DOCTYPE html>"+
"<html>"+
"<head>"+
"<style>"+
"/********** CSS stuff here **********/"+
"</style>"+
"</head>"+
"<body>"+
"<!--------- HTML stuff here ---------->"+
"<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"><" + "/script>" +
"<script>"+
"/*********** jQuery stuff here *****/"+
"<" + "/script>"+
"</body>"+
"</html>"
);
在IE9中,我得到典型的"网页无法显示..."错误.
我已经回顾了以下答案,但这没有帮助.
我使用屏幕外canvas根据某些变量的运行时值动态生成某些图像。在屏幕外画布上绘制图像后，我想获取它并在我的 web 应用程序的多个位置使用它。
策略 1：使用屏幕外画布的toDataURL()方法获取data:包含图像的URI，我可以img在页面中应该显示它的多个元素上以编程方式设置该URI 。
策略二：使用离屏canvas的getImageData()方法获取ImageData实例。用img元素替换canvas元素并调用putImageData()它们。
哪种策略在内存方面更有效？哪个更“地道”？我试图避免重复保存显示图像实例所需的内存。其他建议？
我尝试从数据uri解码qr代码:
var dataUri = 'data:image/gif;base64,R0lGODdh9gD2AIAAAAAAAP///ywAAAAA9gD2AAAC...';
decodeQrCode(dataUri, cb);
我已经尝试过qrcode-decoder-js(以mocha测试为例)
function decodeQrCode(dataUri, cb) {
qrcode.callback = cb;
qrcode.decode(dataUri);
}
// error decoding QR Code
function decodeQrCode(dataUri, cb) {
var qr = new QCodeDecoder();
var img = document.createElement('img');
img.setAttribute('src', dataUri);
qr.decodeFromImage(img, cb);
}
// Error decoding QR Code from Image
但在我看来,两者都不支持数据URI本身.
如何解码数据URI中的QR码？
PostgreSQL 有这种数据类型，称为bytea. 这是他们的blob版本。
在显示图像 png/jpg/gif 时，当前的趋势是使用Data URL。
我的问题是如何将 bytea 值转换为 Base64 数据 URL 值？
我正在用JavaScript做一些非常糟糕的事情,我遇到了一个奇怪的问题.
我正在创建填充静态大小的缓冲区的二进制数据.如果内容未填充缓冲区,则余数将填充空字符.
下一步是转换为base64.
大小(字节)并不总是3的倍数,所以我可能需要在末尾添加填充.缓冲区中的最后一个字节始终为空(实际上,它大约是一个kb的空值).
当我在Firefox和Chrome上将其转换为base64时,我会得到ERR_INVALID_URL一个尾随'=',但是当我没有时,它会下载.
例如:
var url = "data:application/octet-stream;base64,";
window.open(url + "AAAA"); // works
window.open(url + "AAAA="); // doesn't work
window.open(url + "icw="); // works
我的文件有效,但它们不符合规范.
这是无效base64的原因吗？更重要的是,这是一个错误还是规范的一部分？
编辑:
我发布了一个答案,给出了Firefox和Chrome之间的一些奇怪之处.有谁知道标准规定了什么？或者它是那些导致碎片的松散规格之一？如果可能的话,我想要一些确定的东西.
有没有人知道如何将数据uri设置为有效的静音？我真的很好奇,看看有没有这样的东西存在!谢谢.
我有一个数据：需要使用正常的.Net WebClient/ “下载”（读取：作为流或字节数组加载）的URI WebRequest。我怎样才能做到这一点？
我需要这样做是因为我想显示从SVG生成的XAML文件，其中包括一些使用数据的图像：URI。我不想总是解析XAML，将图像保存到磁盘，然后将XAML更改为指向文件。我相信WPF在WebRequest内部使用这些图像。
我不确定它是否可能但是 - 我可以从数据URI获取图像文件大小吗？
例如,假设有一个IMG元素src:
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...
基于此src,我可以使用纯JavaScript获取图像文件大小吗？(没有服务器请求)
data-uri ×10
javascript ×5
base64 ×2
css ×2
html ×2
.net ×1
bytea ×1
c# ×1
canvas ×1
filestream ×1
firefox4 ×1
getimagedata ×1
jquery ×1
off-screen ×1
php ×1
postgresql ×1
putimagedata ×1
python ×1
qr-code ×1
stream ×1
text ×1