我想做的事:
使用来自基本身份验证的安全服务器的jQuery.ajax()来HTTP-GET图像(jpeg).看起来我得到了一些图像数据,它必须是二进制的.我想将其转换为base64,因为那时我可以这样在我的html中插入这个图像:
$("#image").attr('src', 'data:image/jpeg;base64,' + base64encode(data));
ajax调用看起来像这样:
$.ajax({
url: "someurltoajpeg",
type: "GET",
headers: {
"Authorization" : "Basic " + btoa("user:pw")
},
xhrFields: {
withCredentials: true
}
}).done(function( data, textStatus, jqXHR ) {
$("#image").attr('src', 'data:image/jpeg;base64,' + base64encode(data));
}).fail(function( jqXHR, textStatus, errorThrown ) {
alert("fail: " + errorThrown);
});
函数base64encode看起来像这样:
function base64encode(binary) {
return btoa(unescape(encodeURIComponent(binary)));
}
我从这里得到了这个功能: 使用Javascript检索二进制文件内容,base64对其进行编码并使用Python对其进行反向解码
他说那对他有用.但在我的情况下,我的图像的src属性被更改,并且插入了一些非常长的数据,但只有那个图像应该出现的非常小的符号.我可以保存那个"图像",甚至不存在,当我打开它时,我的图像查看器说,它不是一个jpeg文件.这不是由特定图像或相同的原始策略引起的错误.有谁解决这个问题？谢谢
我一直在使用同步XMLHttpRequest,其responseType设置为"arraybuffer"很长一段时间来加载二进制文件并等到它被加载.今天,我收到了这个错误:"Die Verwendung des responseType-Attributes von XMLHttpRequest wird im synchronen Modus im window-Kontekt nichtmehrunterstützt." 大致转换为"不再支持在窗口上下文(？)中以同步模式使用XMLHttpRequest的responseType."
有谁知道如何解决这一问题？我真的不想对这样的事情使用异步请求.
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.responseType = 'arraybuffer';
镀铬工作正常.
例:
<img src='https://example.com/getImage?q=img_ref' />
并https://example.com/getImage要求我们发送一些指定的标头以使请求有效.是可能的,还是我必须使用ajax？
HTML5使您能够在本地存储数据,我认为这很棒.例如,以下是如何使用它:
var store = window.localStorage;
store.setItem('foo', "hellow world");
var test = store.getItem('foo');
// test should = "hellow world"
在html中,您可以通过settig动态显示图像来源:
"data:image/jpg;base64," + (base64string)
所以我的问题是如何将二进制数据转换为base64字符串,以便我可以利用html5本地存储？
例如,如果我能够:
$.ajax({
url: 'someImage.png',
type: 'POST',
success: function (r) {
// here I want to convert r to a base64 string !
// r is not binary so maybe I have to use a different approach
var data = ConvertToBase64(r);
document.getElementById("img").src = "data:image/png;base64," + data;
},
});
我知道我可以通过使用html5将图像包裹在画布上然后将其转换为base64string来解决此问题.我也可以在服务器上发送一个特定的服务,该服务将发送该图像的base64字符串数据(someImage.aspx).我只想知道是否可以从服务器检索二进制数据并将其转换为base64字符串.
我需要使用服务器端应用程序获取已完成渲染并完成运行脚本的页面的当前样式(可能是内联)的HTML(仅提供URL)(没有额外信息,如cookie,没有POST,没有阻碍形式)等).
临时运行的浏览器的桥接/代理或使用浏览器库的独立实用程序是一种可接受的解决方案(但是,所选的浏览器或浏览器库必须在所有主要平台上都可用,并且必须能够在没有OS GUI的情况下运行出席或安装).
一个可选的要求是之后删除所有脚本(已经有了独立的解决方案,在这里添加它,因为可能给定的答案将能够在渲染时删除脚本或类似的东西).
如何在当前样式(可能是内联的)和当前图像(使用数据URI)的单个.html文件中获取HTML + CSS中的快照？
如果可以使用纯PHP来完成它将是一个加号(虽然我怀疑它,我没有发现任何有趣的东西).
编辑:我知道如何加载HTTP资源并获取URL的HTML,这不是我正在寻找的;)
编辑2 示例输入HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="/css/example.css">
<script type="text/javascript" src="/javascript/example.js"></script>
<script type="text/javascript">
window.addEventListener("load",
function(event){
document.title="New title";
document.getElementById("pic_0").style.border="0px";
}
);
</script>
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>Hello world!</p>
<p>
<img
alt=""
style="border: 1px"
id="pic_0"
src="http://linuxgazette.net/144/misc/john/helloworld.png"
>
</p>
</body>
</html>
示例输出:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>New title</title>
<meta http-equiv="Content-Type" …是否可以在不使用画布的情况下将字节数组转换为图像数据？
我目前使用的是这样的东西,但是我认为没有画布可以做到,或者我错了吗？
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var byteArray = [
255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, // red
0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, // green
0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255 // blue
];
var imageData = ctx.getImageData(0, 0, 10, 3);
for(var i = 0; i < byteArray.length; i+=4){
imageData.data[i] = byteArray[i];
imageData.data[i+1] = byteArray[i + 1]; …