Node.js récupère une image du web et l'encode avec base64

Question

J'essaie d'extraire une image du Web et de l'encoder en base64.

Ce que j'ai jusqu'à présent est essentiellement :

var request = require('request');
var BufferList = require('bufferlist').BufferList;

bl = new BufferList(),

request({uri:'http://tinypng.org/images/example-shrunk-8cadd4c7.png',responseBodyStream: bl}, function (error, response, body) 
{
    if (!error && response.statusCode == 200) 
    {
        var type = response.headers["content-type"];
        var prefix = "data:" + type + ";base64,";
        var base64 = new Buffer(bl.toString(), 'binary').toString('base64');
        var data = prefix + base64;
        console.log(data);
    }
});

Cette solution semble assez proche de la solution mais je n'arrive pas à la faire fonctionner. Il reconnaît le type de données et fournit la sortie :

data:image/png;base64

Cependant, la liste tampon "bl" semble être vide.

Merci d'avance !

Answer 1

BufferList est obsolète, car sa fonctionnalité est maintenant dans le noyau de Node. La seule partie délicate ici est de configurer la demande pour ne pas utiliser d'encodage :

var request = require('request').defaults({ encoding: null });

request.get('http://tinypng.org/images/example-shrunk-8cadd4c7.png', function (error, response, body) {
    if (!error && response.statusCode == 200) {
        data = "data:" + response.headers["content-type"] + ";base64," + Buffer.from(body).toString('base64');
        console.log(data);
    }
});

Answer 2

Si quelqu'un rencontre le même problème en utilisant axios comme client http, la solution est d'ajouter la propriété responseType aux options de la requête avec la valeur 'arraybuffer' :

let image = await axios.get('http://aaa.bbb/image.png', {responseType: 'arraybuffer'});
let returnedB64 = Buffer.from(image.data).toString('base64');

J'espère que cela vous aidera

Answer 3

LE PLUS RÉCENT, À LA FIN DE 2017

Eh bien, après avoir lu les réponses ci-dessus et fait quelques recherches, j'ai découvert une nouvelle façon de procéder qui ne nécessite aucune installation de paquet , http (qui est intégré) est suffisant !

NOTE : Je l'ai utilisé dans la version 6.x de node, donc je suppose qu'il est également applicable aux versions supérieures.

var http = require('http');

http.get('http://tinypng.org/images/example-shrunk-8cadd4c7.png', (resp) => {
    resp.setEncoding('base64');
    body = "data:" + resp.headers["content-type"] + ";base64,";
    resp.on('data', (data) => { body += data});
    resp.on('end', () => {
        console.log(body);
        //return res.json({result: body, status: 'success'});
    });
}).on('error', (e) => {
    console.log(`Got error: ${e.message}`);
});

J'espère que cela vous aidera !

En outre, consultez les informations sur le http.get(...) aquí ¡!

Answer 4

Une autre façon d'utiliser le node fetch, qui décompose les étapes par variable :

const fetch = require('node-fetch');

const imageUrl = "Your URL here";
const imageUrlData = await fetch(imageUrl);
const buffer = await imageUrlData.arrayBuffer();
const stringifiedBuffer = Buffer.from(buffer).toString('base64');
const contentType = imageUrlData.headers.get('content-type');
const imageBas64 = 
`data:image/${contentType};base64,${stringifiedBuffer}`;

Answer 5

Si vous connaissez le type d'image, il s'agit d'une simple ligne avec l'option node-fetch paquet. Il ne conviendra peut-être pas à tout le monde, mais j'avais déjà node-fetch en tant que dépendance, au cas où d'autres seraient dans le même cas :

await fetch(url).then(r => r.buffer()).then(buf => `data:image/${type};base64,`+buf.toString('base64'));