使用 jQuery.ajax() 获取图像并将其解码为 base64 [英] Get Image using jQuery.ajax() and decode it to base64

问题描述

我想做什么:

使用 jQuery.ajax() 从基本身份验证安全服务器 HTTP-GET 图像 (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);
            });

base64encode 函数如下所示:

the function base64encode looks like this:

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

我从这里得到了这个功能:使用 Javascript，base64 检索二进制文件内容使用 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

推荐答案

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

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

然后使用描述的base64Encode函数代替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() 获取图像并将其解码为 base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！