Comment puis-je convertir une image binaire de l'appel de l'API en Uri de données en JavaScript?

Je sais que c'est une très vieille question, mais comme cela se référait aux images et aux données binaires sur XHR, la sauce secrète pour moi est en deux étapes importantes:

Étape 1: strong> Assurez-vous d'utiliser un jeu de caractères défini sur l'utilisateur personnalisé pour empêcher le navigateur de modifier le contenu. par exemple p> xxx pré>

étape 2: strong> Utilisez string.fromcharcode (...) & 0XFF) code> à Désactivez le problème avec BTOA () CODE> Ne pas pouvoir gérer les chaînes binaires. Ceci a été inspiré par le gist @ https://gist.github.com/graylikeme/867848 (Et c'est actuellement noire magique pour moi en ce moment) Notez que, généralement, vous le feriez également parce que vous devez envoyer des en-têtes d'autorisation ou quelque chose aussi, mais cela n'est pas inclus dans cet exemple. P>

<div id="output-el"></div>
<script>
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('readystatechange', function() {
        var outputEl = document.getElementById('xhr-output');

        // Done?
        if (this.readyState === 4) {

            // Make sure this is an image.
            var contentType = this.getResponseHeader('content-type');
            if (contentType !== null && contentType.indexOf('image/') === 0) {
                // Prepare binary response so we can base64 encode it (and btoa() function doesn't freak out).
                // Thanks to: https://gist.github.com/graylikeme/867848
                var response = this.responseText;
                var binary = '';
                for(i=0; i < response.length; i++) {
                    binary += String.fromCharCode(response.charCodeAt(i) & 0xff);
                }

                // Drop into data URI.
                var encoded = btoa(binary);
                outputEl.innerHTML = `<img alt="image preview" src="data:${contentType};base64,${encoded}">`;

            } else {
                console.log('Got a non-image response:', this.responseText);
            }
        }
    });

    // Make sure browser doesn't alter the response before we handle it.
    xhr.overrideMimeType('text\/plain; charset=x-user-defined');
    xhr.open('GET', 'https://example.com/path/to/some/image.jpg');
    xhr.send();
</script>