这可能只是一个语法错误,但我找不到任何关于这种用法的详尽参考.Chrome正在重击我的背景资产,所以我显然冒犯了一些东西.
我希望红色框(svg css背景)中的内容像html中的内联svg一样呈现.简单吧？
不要说不能做!我的灵感是这样的:http://jsfiddle.net/estelle/SJjJb/
我正在尝试将图像直接嵌入到我的css中作为编码数据:
background:#fae url("data:image/gif;base64,
R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jv
b29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//
mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Eky
ky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCm
TIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr
7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7")
no-repeat;
但是,它失败了.更奇怪的是,将数据URI直接嵌入到图像标记中确实有效:
你可以查看我的例子:http://jsfiddle.net/cAb2y/1/
难道我做错了什么？
(来源示例:http://www.websiteoptimization.com/speed/tweak/inline-images/)
我正在尝试实现mixin自定义文本的下划线,比如用于CSS3文本修饰属性的 polyfill :线条,样式,颜色,浏览器还不支持.
我的想法是在画布中执行绘画适当的线条,然后将其转换为data-uri并将其用作目标元素的背景.问题是当用node.js编译LESS时,环境中没有画布.从技术上讲,我可以使用node-canvas来执行此任务,但我不想为节点创建任何依赖项来编译LESS.
是否有一种良好而简单的替代方式以某种方式绘制微图像并基于此形成数据-ri,而不是外部库或依赖项？
解决:PNG数据生成代码及一些演示这里.它是.pngmixin,它生成索引颜色png,接受字节流(字符串)作为数据,其中00 - 透明颜色,01 - 传递颜色.
我遇到一个问题，我的服务器应用程序获取 JSON 的 DataURI，我想再次将其解析为 JSON。我怎么能这样做呢？我尝试了不同的方法，但似乎没有任何效果。我尝试简单地解析它，encodeURI(data);但仍然无法获得原始的 JSON。
这是数据 URI：
data:application/json;base64,ew0KICAgICJtYWx0X3R5cGUiOiAibG9nIiwNCiAgICAibWFsdF9kYXRhIjogIldvdywgdSByIGFsbW9zdCB0aGVyZSA6TyINCn0=
我也尝试过对其进行编码：
var data = 'data:application/json;base64,ew0KICAgICJtYWx0X3R5cGUiOiAibG9nIiwNCiAgICAibWFsdF9kYXRhIjogIldvdywgdSByIGFsbW9zdCB0aGVyZSA6TyINCn0=';
Buffer.from(data.toString('utf8'), 'base64').toString('ascii')
但如果我在控制台上登录，我会得到这个：u+Zje F- J'm+k0P"&VGEwGR#"&Fvr"@P"&VGEvFF#"%vwrBR"FVw7BFW&R$r P'
我使用以下方法将图像转换为base64字符串:
FileStream fs = new FileStream(imagePath, FileMode.Open,FileAccess.Read);
byte[] filebytes = new byte[fs.Length];
fs.Read(filebytes, 0, Convert.ToInt32(fs.Length));
return Convert.ToBase64String(filebytes, Base64FormattingOptions.InsertLineBreaks);
对于每个页面加载,此方法在运行时运行多次.我担心我网站上的性能会受到影响.
我知道它会影响性能,但会对它产生重大影响吗？
我想拍一张本地图片,调整它并输出dataURI.为什么我的base64_encode代码不起作用？
<?php
// Create an image instance
$imagearray = array('pop3', 'aboutme', 'passions', 'lindahlstudios', 'blog');
foreach ($imagearray as $key) {
echo $key;
//load image
$im = imagecreatefrompng($key.'button4.png');
//set width of resize
$width = 70;
$ratio = $width / imagesx($im);
$height = imagesy($im) * $ratio;
echo ' resizeTo-'.$width.'x'.$height.'<br>';
$new_image = imagecreatetruecolor($width, $height);
imagecopyresampled($new_image, $im, 0, 0, 0, 0, $width, $height, imagesx($im), imagesy($im));
//save image to file
//imagepng($new_image, $key.'button4_'.$width.'.png');
//print DataURI
echo base64_encode($new_image);
imagedestroy($new_image);
}
?>
我试图在外部CSS文件中加载data-uri.这是代码:
.icon-blank-page-large {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAA3NCSVQICAjb4U/gAAAAXVBMVEX///+vr6+tra2mpqalpaWdnZ3///+UlJT7+/v39/f19fXz8/Pr6+vp6enn5+fj4+Ozs7OqqqqmpqalpaWFhYWRkZGNjY2Li4uJiYl+fn56enp4eHh2dnZycnJwcHBeRFztAAAAH3RSTlMAM1WImbvd3e7u7u7u7u7u7u7u7u7/////////////xBl9GgAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAUdEVYdENyZWF0aW9uIFRpbWUANi8xLzEzOKlF0AAAAMNJREFUSInt1tsSgiAUhWGsxNJOHsoQ1n7/xyxLaYSNY01XDf81nwoXsoUYShW4skTwNYDp3LQm0it2fQrUp610y4nAC4XSW91H1EKvGQBzDIDiCmwY0Pnf8wJy13ICHbu+B7LgxBxg3xEG+/6wbp4Ig/MgdLIIXMiWLQL5W2ARsBXmQyB1BH8EKNDvQNx03HTc9HdA85diGASuXdve+d0r1POggpqAx+hQMaPD2KEE0gl4Difam07GDNAIp8D4M6Ts8++7/VXclnc6pwAAAABJRU5ErkJggg);
}
它适用于Chrome和Firefox,但Safari无法加载图像并记录以下错误:
Failed to load resource: The operation couldn’t be completed. (kCFErrorDomainCFNetwork error -10.)
有任何想法吗？
我成功地将png图像转换为数据uri,然后将这些数据注入到html元素中.
//HTML part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
$("#myImage").attr("src", "data:image/png;base64," + data); // inject data:image in DOM
// data:[<mime type>][;charset=<charset>][;base64],<encoded data>
})
这证明了数据uri是正确的.
但由于某种原因,我找不到任何方法在客户端dataviz中使用d3js,因此数据uri最终显示预期的光栅图像.有些东西阻止它发挥作用.
//SVG part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
var width = 500, height = width/2;
var svg = d3.select("svg").attr("width",width).attr("style","background:#80A0b4");
svg.attr(':xmlns','http://www.w3.org/2000/svg')
.attr(':xmlns:xlink','http://www.w3.org/1999/xlink');
var g = svg.append("g").append("image")
.attr("width", width / 2)
.attr(":xlink:href", "data:image/png;base64," + data); // replace link by data URI
})
我怀疑在本机d3js xmlns名称空间中存在一些冲突,或者我输了一个拼写错误？有我的小提琴http://jsfiddle.net/xGUsu/106/.任何的想法 ？
(与我的svg中为什么我的base64编码的png不可见相关？ JS:如何将image.png编码为base64代码以进行数据URI嵌入？)
我已使用 jquery 将画布图像转换为数据 URI，但数据 URI 太长，例如大约 800,000 个字符。
是否有任何方法可以减少/缩短数据 URI 的长度？
我需要通过 GET/POST 方法发送图像数据，但我收到一条错误消息，指出字符串长度太长
长话短说
我正在尝试将fetch图像转换为 base64，并将数据 urlimg放入的属性中src，但它不起作用：
async function ajax(id) {
const tag = document.getElementById(id);
const path = tag.getAttribute("data-src");
const response = await fetch(path);
const blob = await response.blob();
const base64 = window.btoa(blob);
const content = `data:image/jpeg;base64,${base64}`;
tag.setAttribute("src", content);
}
详细信息以及其他一些有效的方法如下。
我一直在尝试不同的延迟加载方法：
$ mkdir lazy
$ cd lazy
$ wget https://upload.wikimedia.org/wikipedia/commons/7/7a/Lone_Ranger_and_Silver_1956.jpg # any other example image
现在创建一个名为index.html以下内容的文件：
<script>
// this works
function setAttribute(id) {
const tag = document.getElementById(id);
const path = tag.getAttribute("data-src"); …我正在制作一个可以预览 PDF 文件的应用程序。嵌入元素embed对于小型 PDF 文件效果很好，但对于较大的 PDF 文件则失败，因为数据 URL 的大小限制。我正在寻找一种使用浏览器的本机 PDF 查看器来查看 PDF 文件但不使用数据 url 的方法。
我的代码目前如下所示：
<script>
function addToCard(input) {
if (input.files.length <= 0) return;
let fileReader = new FileReader();
fileReader.onload = async function () {
pdfCard.src = fileReader.result;
};
fileReader.readAsDataURL(input.files[0]);
}
</script>
<input type=file oninput="addToCard(this)" />
<embed id=pdfCard style="width:100%;height:100%" />