我想做什么
使用来自basic-auth安全服务器的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',' + base64encode(data));
}).fail(function( jqXHR,errorThrown ) {
alert("fail: " + errorThrown);
});
函数base64encode如下所示：
function base64encode(binary) {
return btoa(unescape(encodeURIComponent(binary)));
}
我从这里得到这个功能：
Retrieving binary file content using Javascript,base64 encode it and reverse-decode it using Python
在那里他说,它适用于他.但在我的情况下,我的图像的src属性被更改,并且插入了一些非常长的数据,但是只有那个图像的非常小的符号才会出现.我可以保存“图像”,甚至没有,当我打开它,我的图像查看器说,它不是一个jpeg文件.这不是由特定图像或同一原始策略引起的错误.有人有解决这个问题吗？谢谢
解决方法
首先,根据
Retrieving binary file content using Javascript,base64 encode it and reverse-decode it using Python添加正确的mimetype到Ajax调用：
$.ajax({
url: "someurltoajpeg",headers: {
"Authorization" : "Basic " + btoa("user:pw")
},xhrFields: {
withCredentials: true
},mimeType: "text/plain; charset=x-user-defined"
}).done(function( data,jqXHR ) {
$("#image").attr('src',' + base64encode(data));
}).fail(function( jqXHR,errorThrown ) {
alert("fail: " + errorThrown);
});
然后使用base64Encode函数,而不是btoa：
function base64Encode(str) {
var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var out = "",i = 0,len = str.length,c1,c2,c3;
while (i < len) {
c1 = str.charCodeAt(i++) & 0xff;
if (i == len) {
out += CHARS.charAt(c1 >> 2);
out += CHARS.charAt((c1 & 0x3) << 4);
out += "==";
break;
}
c2 = str.charCodeAt(i++);
if (i == len) {
out += CHARS.charAt(c1 >> 2);
out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
out += CHARS.charAt((c2 & 0xF) << 2);
out += "=";
break;
}
c3 = str.charCodeAt(i++);
out += CHARS.charAt(c1 >> 2);
out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
out += CHARS.charAt(c3 & 0x3F);
}
return out;
}
再见
