获取图像使用jQuery.ajax（）和DE code时为base64

问题描述

我想要做的：

HTTP-GET使用jQuery.ajax图像（JPEG）（）从基本认证保护的服务器。好像我得到的一些图像数据，它必须是二进制。我想将其转换为Base64，因为那样的话我可以插入此作为我的HTML的图像是这样的：

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:

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

Ajax调用看起来是这样的：

the ajax call looks like this:

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

功能base64en code是这样的：

the function base64encode looks like this:

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

我得到这个功能在这里：<一href="http://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-en$c$c-it-and-reverse-de">Retrieving二进制文件的内容使用Javascript，BASE64 EN code就和c它使用Python

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

在那里，他说，这为他工作。但对我来说我的形象的src属性发生变化，有的很长的数据插入，但只有非常小的符号，一个形象应该是有出现。我可以保存图像，那不是即使在那里，当我打开它，我的形象观众说，这不是一个JPEG文件。这是不是造成特定的图像或同一产地的政策错误。有没有人解决这个？谢谢

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

推荐答案

首先，根据<一href="http://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-en$c$c-it-and-reverse-de">Retrieving二进制文件的内容使用Javascript，BASE64 EN code，并使用Python 添加正确的mimetype的Ajax调用反向德code的：

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:

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

然后使用说明，而不是再base64En code函数的BTOA：

Then use base64Encode function described instead then the 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;
    }

再见

这篇关于获取图像使用jQuery.ajax（）和DE code时为base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！