Charger une image dans un Blob: les différentes manières

Afin de voir les différentes façons qu'ils existent de charger une image (ou une ressource binaire) dans sa page Web via JavaScript, je me suis amusé à faire une petite application affichant un chat:

J'ai pu déterminer ainsi 4 façons de résoudre ce besoin:

'use strict';

const IMAGE_PATH = 'resources/cat.jpg';
const IMAGE_CONTENT_TYPE = 'image/jpeg';

export default class LoadingService  {
    /**     * @returns {Promise.<Blob>}     */    static loadWithAjaxBlob() {
        return new Promise((resolve, reject) => {
            let request = new XMLHttpRequest();
            request.open('GET', IMAGE_PATH, true);
            request.responseType = 'blob';

            request.onload = function () {
                resolve(request.response);
            };

            request.onerror = reject;
            request.send(null);
        });
    }

    /**     * @returns {Promise.<Blob>}     */    static loadWithAjaxArrayBuffer() {
        return new Promise((resolve, reject) => {
            let request = new XMLHttpRequest();
            request.open('GET', IMAGE_PATH, true);
            request.responseType = 'arraybuffer';

            request.onload = function () {
                resolve(new Blob([request.response],

{ 'type': IMAGE_CONTENT_TYPE }));
            };

            request.onerror = reject;
            request.send(null);
        });
    }

    /**     * @returns {Promise.<Blob>}     */    static loadWithAjaxOldWay() {
        return new Promise((resolve, reject) => {
            let request = new XMLHttpRequest();
            request.open('GET', IMAGE_PATH, false);
            request.overrideMimeType('text\/plain; charset=x-user-defined');

            request.onerror = reject;
            request.send(null);

            // Convert to arraybuffer            let byteNumbers = [];
            byteNumbers.length = request.responseText.length;

            for (let i = 0; i < request.responseText.length; ++i) {
                byteNumbers[i] = request.responseText.charCodeAt(i);
            }

            let byteArray = new Uint8Array(byteNumbers);

            // Return as blob            resolve(new Blob([byteArray], { 'type': IMAGE_CONTENT_TYPE }));
        });
    }

    /**     * @returns {Promise.<Blob>}     */    static loadWithFetch() {
        return fetch(IMAGE_PATH)
            .then(response => response.blob());
    }
};

Nous pouvons voir une très vieille façon de faire avec la méthode "loadWithAjaxOldWay". Alors à l'époque, nous avions plutôt tendance à convertir le résultat en base64 et à l'injecter en tant qu'rul dans nos balises images. Mais j'ai voulu voir comment le convertir en Blob, et cela demande de passer d'abord par la création d'un tableau Uint8Array.

Par la suite, la méthode "loadWithAjaxArrayBuffer" nous permet plus facilement de réaliser la même opération, mais cela nous demande de bien connaître le type de données remontées afin de le convertir en Blob.

Ce qui n'est plus le cas avec la méthode "loadWithAjaxBlob" où nous demandons directement le contenu de la requête en Blob.

Néanmoins, ces méthodes sont un peu volumineuses à cause de la verbosité des requêtes Ajax. Et nous pouvons voir qu'avec la méthode "loadWithFetch", nous pouvons en une seule ligne récupérer (via une promise) notre Blob !

Bref, nous pouvons désormais simplement récupérer des binaires au sein de notre page Web, notamment grâce à l'api Fetch.