web-dev-qa-db-fra.com

Obtenez l'image en utilisant jQuery.ajax () et décodez-la en base64

Ce que je veux faire:

HTTP-GET une image (jpeg) en utilisant jQuery.ajax () à partir d'un serveur sécurisé de base-authent. il semble que j'obtienne des données de l'image, ça doit être binaire. je veux convertir cela en base64, car alors je peux insérer ceci comme une image dans mon html de cette façon:

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

l'appel ajax ressemble à ceci:

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

la fonction base64encode ressemble à ceci:

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

j'ai obtenu cette fonction à partir d'ici: Récupération du contenu du fichier binaire en utilisant Javascript, codage en base64 et décodage inverse en utilisant Python

là, il dit que ça marche pour lui. mais dans mon cas, l'attribut src de mon image est modifié, et de très longues données sont insérées, mais seul le très petit symbole pour qu'une image doit y être apparaît. je peux enregistrer cette "image", ce n'est même pas là, et quand je l'ouvre, ma visionneuse d'image dit que ce n'est pas un fichier jpeg. ce n'est pas une erreur causée par l'image spécifique ou par la même politique d'origine. Quelqu'un at-il une solution à cela? Merci

jqueryajaximagebinarybase64
21
user1963987

Tout d'abord, selon Récupération du contenu d'un fichier binaire à l'aide de Javascript, base64 l'encode et le décode à l'envers en utilisant Python ajoutez le mimetype correct à l'appel 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);
        });

Utilisez ensuite la fonction base64Encode décrite à la place, puis le 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;
    }

au revoir

28
gaetanoM

Si vous n'avez pas à prendre en charge Internet Explorer 9, vous pouvez utiliser FileReader API pour convertir un blob en URL de données. Il fournit une méthode readAsDataURL() qui accepte un Blob comme premier argument. Dès que le blob est lu, il déclenche un événement load et fournit l'URL de données sur la propriété result.

C'est beaucoup plus stable et nécessite moins de code car il ne nécessite pas d'encodage personnalisé en tant que chaîne base64, ce qui est une tâche complexe prenant les limitations de btoa ( https://developer.mozilla.org/en-US/docs/ Web/API/WindowOrWorkerGlobalScope/btoa ) en compte.

Vous pouvez utiliser jQuery.ajax() ou fetch pour charger le fichier sous la forme Blob .

jQuery.ajax(url, {
  dataType: 'binary',
  xhr() {
    let myXhr = jQuery.ajaxSettings.xhr();
    myXhr.responseType = 'blob';
    return myXhr;
  }
}).then((response) => {
  // response is a Blob
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.addEventListener('load', () => {
      // reader.result holds a data URL representation of response
      resolve(reader.result);
    }, false);
    reader.addEventListener('error', () => {
      reject(reader.error);
    }, false);
    reader.readAsDataURL(response);
  });
});

Cet exemple de code utilise Promise mais il fonctionnerait de manière similaire si vous utilisez des rappels.

1
jelhan