使用jQuery.ajax（）获取图像并将其解码为base64

我想做的事：

使用来自基本身份validation的安全服务器的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))); } 

我从这里得到了这个function： 使用Javascript检索二进制文件内容，base64编码并使用Python对其进行反向解码

在那里，他说这对他有用。 但在我的情况下，我的图像的src属性被更改，并且插入了一些非常长的数据，但只有那个图像的非常小的符号才会出现。 我可以保存那个“图像”，甚至不存在，当我打开它时，我的图像查看器说，它不是一个jpeg文件。 这不是由特定图像或相同的原始策略引起的错误。 有谁解决这个问题？ 谢谢

Answer 1

首先，根据使用Javascript检索二进制文件内容，base64对其进行编码并使用Python对其进行反向解码，将正确的mimetype添加到Ajax调用：

  $.ajax({ url: "someurltoajpeg", type: "GET", headers: { "Authorization" : "Basic " + btoa("user:pw") }, xhrFields: { withCredentials: true }, mimeType: "text/plain; charset=x-user-defined" }).done(function( data, textStatus, jqXHR ) { $("#image").attr('src', 'data:image/jpeg;base64,' + base64encode(data)); }).fail(function( jqXHR, textStatus, 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; } 

再见

Answer 2

如果您不必支持Internet Explorer 9，则可以使用FileReader API将Blob转换为数据URL。 它提供了一个readAsDataURL()方法，它接受Blob作为第一个参数。 一旦读取blob，它就会触发load事件并在result属性上提供数据URL。

这样更稳定，需要更少的代码，因为它不需要自定义编码作为base64字符串，这是一个复杂的任务，受到btoa的限制（ https://developer.mozilla.org/en-US/docs/Web/API/ WindowOrWorkerGlobalScope / btoa ）考虑在内。

您可以使用jQuery.ajax()或fetch将文件加载为Blob 。

 jQuery.ajax(url, { dataType: 'binary', xhr() { let myXhr = jQuery.ajaxSettings.xhr(); myXhr.responseType = 'blob'; return myXhr; } }).then((response) => { // response is a Blob return new Promise((resolve, reject) => { let reader = new FileReader(); reader.addEventListener('load', () => { // reader.result holds a data URL representation of response resolve(reader.result); }, false); reader.addEventListener('error', () => { reject(reader.error); }, false); reader.readAsDataURL(response); }); }); 

此示例代码使用Promise，但如果使用回调，它将工作类似。