Node.js base64 encode une image téléchargée pour l'utilisation dans data URI

L'aide d'un Noeud v0.2.0 je suis en train de chercher une image à partir d'un serveur, de le convertir en une chaîne base64 et ensuite l'intégrer sur la page dans une balise image. J'ai le code suivant:

var express = require('express'),
request = require('request'),
sys = require('sys');

var app = express.createServer(
    express.logger(),
    express.bodyDecoder()
);

app.get('/', function(req, res){

    if(req.param("url")) {
        var url = unescape(req.param("url"));
        request({uri:url}, function (error, response, body) {
          if (!error && response.statusCode == 200) {

                var data_uri_prefix = "data:" + response.headers["content-type"] + ";base64,";
                var buf = new Buffer(body);
                var image = buf.toString('base64');

                image = data_uri_prefix + image;

                res.send('<img src="'+image+'"/>');

          }
        });
    }
});

app.listen(3000);

Remarque: Ce code nécessite "express" et "demande". Et bien sûr, nœud. Si vous avez des mnp installé, il devrait être aussi simple que "npm install express" ou "npm install demande".

Malheureusement, cela ne fonctionne pas comme prévu. Si je fais la conversion avec la Logo Google, puis-je obtenir ce qui suit au début de la chaîne:

77+9UE5HDQoaCgAAAA1JSERSAAABEwAAAF8iawaaao+/ve+/ve+/vSkAAAMAUExURQBzCw5xGiNmK0t+U++/vQUf77+9BiHvv70WKO+/vQkk77+9D

Cependant si j'utilise une ligne Encoder en Base64 avec la même image, alors qu'il fonctionne parfaitement. La chaîne commence comme ceci:

iVBORw0KGgoAAAANSUhEUgAAARMAAABfcamaaad8mtmpaaadafbmveuacwsocrojzitlflowbr+aBiGQFiipCSS8DCm1Cya1FiyNKzexKTjddsrlds

Où vais-je tort que ce qui ne fonctionne pas correctement? J'ai essayé beaucoup de différentes js base64 implémentations et ils ont tous ne fonctionnent pas de la même manière. La seule chose que je peux penser, c'est que je suis en train de convertir la mauvaise chose en base64, mais que dois-je convertir si c'est le cas?

InformationsquelleAutor betamax | 2010-09-14
  1. 13

    Le problème est d'encodage et de stocker des données binaires dans les chaînes de caractères javascript. Il y a un très bon article sur ce en vertu de Tampons à http://nodejs.org/api.html.

    Malheureusement, la façon la plus simple pour résoudre ce agissait de modifier la demande de mnp. J'ai dû ajouter response.setEncoding('binary'); sur la ligne juste en dessous de 66 var buffer; dans /path/to/lib/node/.npm/request/active/package/lib/main.js. Cela fonctionne très bien pour cette demande, mais pas d'autres. Vous pourriez vouloir pirater de sorte que c'est uniquement basée sur quelques autres passé option.

    J'ai ensuite changé var buf = new Buffer(body) à var buf = new Buffer(body, 'binary');. Après cela, tout a bien fonctionné.

    Une autre façon de le faire, si vous n'avez vraiment pas envie de toucher à la demande de la ngp, serait de passer à un objet qui implémente l'Écriture de Flux dans le responseBodyStream argument à la demande. Cet objet serait alors de stocker le flux de données à partir de la réponse dans son propre tampon. Peut-être il y a une bibliothèque qui fait déjà... je ne suis pas sûr.

    Je vais le laisser ici pour l'instant, mais n'hésitez pas à commenter si vous voulez moi de clarifier quoi que ce soit.

    MODIFIER

    Découvrez des commentaires. Nouvelle solution à http://gist.github.com/583836

    • Merci, cela fonctionne mais je n'aime pas vraiment l'idée de l'édition de la trousse de demande pour qu'il fonctionne. Exactement comment voulez-vous mettre en œuvre une Écriture un objet de Flux? Je ne peux pas comprendre comment en créer un. Toute aide serait vraiment appréciée!
    • Trouvé une belle écriture de flux de mise en œuvre dans le github.com/substack/node-bufferlist. Voici une version mise à jour du code qui n'a pas besoin de modifier la demande de la bibliothèque: gist.github.com/583836.
    • Désolé, je suis distrait. Ça fonctionne et c'est exactement ce que je voulais. Merci pour votre aide!
    • Merci pour le partage. Depuis, la Demande a ajouté un "codage" option. Définissez la valeur en "binaire" pour obtenir le même effet: demande({uri : url,d'encodage : 'binaire'}, function (error, de réponse, de corps) { ... });
    InformationsquelleAutor bxjx
  2. 8

    Le code suivant (disponible à l' https://gist.github.com/804225)

    var URL = require('url'),
    sURL = 'http://nodejs.org/logo.png',
    oURL = URL.parse(sURL),
    http = require('http'),
    client = http.createClient(80, oURL.hostname),
    request = client.request('GET', oURL.pathname, {'host': oURL.hostname})
;

request.end();
request.on('response', function (response)
{
    var type = response.headers["content-type"],
        prefix = "data:" + type + ";base64,",
        body = "";

    response.setEncoding('binary');
    response.on('end', function () {
        var base64 = new Buffer(body, 'binary').toString('base64'),
            data = prefix + base64;
        console.log(data);
    });
    response.on('data', function (chunk) {
        if (response.statusCode == 200) body += chunk;
    });
});

    devrait également produire des données URI, sans nécessiter aucun des modules externes.

    InformationsquelleAutor JFSIII
  3. 1

    Cela fonctionne pour moi, à l'aide de la demande:

    const url = 'http://host/image.png';
request.get({url : url, encoding: null}, (err, res, body) => {
    if (!err) {
        const type = res.headers["content-type"];
        const prefix = "data:" + type + ";base64,";
        const base64 = body.toString('base64');
        const dataUri = prefix + base64;
    }
});

    Pas besoin d'intermédiaire tampons. La clé est de définir le codage de la valeur null.

    InformationsquelleAutor Steven Spungin