我想做什么
使用来自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; }
再见