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

我想做什么

使用来自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;
    }

再见