Получите изображение с помощью jQuery.ajax() и расшифруйте его до base64

Что я хочу сделать:

HTTP-GET изображение (jpeg) с помощью jQuery.ajax() из защищенного сервера basic-auth. кажется, что я получаю некоторые данные изображения, он должен быть двоичным. Я хочу преобразовать это в 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)));
        }

Я получил эту функцию отсюда: Извлечение содержимого двоичного файла с использованием Javascript, base64 кодирует его и реверсирует его с помощью Python

там он говорит, что это работает для него. но в моем случае атрибут src моего изображения изменяется, а некоторые очень длинные данные вставляются, но только очень маленький символ для изображения должен появляться. я могу сохранить это "изображение", даже там, и когда я его открываю, мой просмотрщик изображений говорит, что это не файл jpeg. это не ошибка, вызванная конкретным изображением или той же политикой происхождения. есть ли у кого-нибудь решение? спасибо

Ответ 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;
    }

до свидания