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

What i want to do:

我想做的是:

HTTP-GET an image (jpeg) using jQuery.ajax() from a basic-auth secured server. it seems like i get some data of the image, it must be binary. i want to convert that to base64, because then i can insert this as an image in my html this way:

使用jQuery.ajax()从基本安全服务器获取图像(jpeg)。好像我得到了一些图像的数据，它一定是二进制的。我想把它转换成base64，因为这样我就可以把它作为图像插入到我的html中:

     $("#image").attr('src', 'data:image/jpeg;base64,' + base64encode(data));

the ajax call looks like this:

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);
            });

the function base64encode looks like this:

函数base64encode如下所示:

        function base64encode(binary) {
            return btoa(unescape(encodeURIComponent(binary)));
        }

i got this function from here: Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python

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

there he says that it works for him. but in my case the src attribute of my image is changed, and some very long data is inserted, but only the very small symbol for that an image should be there appears. i can save that "image", thats not even there, and when i open it, my image viewer says, that it is not a jpeg file. this is not an error caused by the specific image or by the same origin policy. has anyone a solution to this? thanks

在那里他说这对他有用。但是在我的例子中，我的图像的src属性被修改了，并且插入了一些很长的数据，但是只有图像的很小的符号才会出现。我可以保存那个“图像”，它甚至不在那里，当我打开它，我的图像查看器说，它不是jpeg文件。这不是由特定图像或同源策略引起的错误。有人能解决这个问题吗?谢谢

1 个解决方案

#1

First of all, according to Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python add the correct mimetype to the Ajax call:

首先，根据使用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);
        });

Then use base64Encode function described instead then the btoa:

然后使用描述的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;
    }

bye

再见

#1