Axios: Comment transformer l'image de la demande d'obtention en base64

Je pense que c'est une question pour StackOverflow.

pour ceux qui cherchent la solution, j'ai le code suivant :

get('/getImg', {
    responseType: 'arraybuffer' 
})
.then(function(result) {
    console.log(_imageEncode(result.data))
})

function _imageEncode (arrayBuffer) {
    let u8 = new Uint8Array(arrayBuffer)
    let b64encoded = btoa([].reduce.call(new Uint8Array(arrayBuffer),function(p,c){return p+String.fromCharCode(c)},''))
    let mimetype="image/jpeg"
    return "data:"+mimetype+";base64,"+b64encoded
}

C'était notre solution, ça marche comme un charme

return axios.get('http://example.com/image.png', { responseType: 'arraybuffer' })
      .then((response) => {
        let image = btoa(
          new Uint8Array(response.data)
            .reduce((data, byte) => data + String.fromCharCode(byte), '')
        );
        return `data:${response.headers['content-type'].toLowerCase()};base64,${image}`;
      });

La raison pour laquelle cela ne fonctionnera pas est qu'axios met tout dans un objet json. Comme vous ne pouvez pas mettre de binaire dans un objet json, il le convertit en une chaîne qui casse le binaire.

Cela a fonctionné parfaitement pour moi:

function getBase64(url) {
  return axios
    .get(url, {
      responseType: 'arraybuffer'
    })
    .then(response => new Buffer(response.data, 'binary').toString('base64'))
}

si vous êtes sur un nœud comme moi et que vous utilisez v >= 6 , il y a eu un changement et vous devez utiliser Buffer.from ou similaire.

function getBase64(url) {
  return axios
    .get(url, {
      responseType: 'arraybuffer'
    })
    .then(response => Buffer.from(response.data, 'binary').toString('base64'))
}

Référence Safe-buffer
new Buffer()' was deprecated since v6. Use 'Buffer.alloc()' or 'Buffer.from()' (use 'https://www.npmjs.com/package/safe-buffer' for '<4.5.0') instead

@sean-hill Avez-vous une idée de la raison pour laquelle il ne peut pas obtenir le premier jeton de l'image ? Je ne vois pas la partie data:image/png;base64, pour une raison quelconque, ce qui rend les données base64 invalides

ce travail pour moi

function getImage(imageUrl) {
var options = {
    url: `${imageUrl}`,
    encoding: "binary"
};
  return new Promise(function (resolve, reject) {
    request.get(options, function (err, resp, body) {
        if (err) {
            reject(err);
        } else {
            var prefix = "data:" + resp.headers["content-type"] + ";base64,";
            var img = new Buffer(body.toString(), "binary").toString("base64");
            //  var img = new Buffer.from(body.toString(), "binary").toString("base64");
            var dataUri = prefix + img;
            resolve(dataUri);
        }
    })
})
}

function getImage(imageUrl) {
var options = {
    url: `${imageUrl}`,
    encoding: "binary"
};

    request.get(options, function (err, resp, body) {
        if (err) {
            reject(err);
        } else {
            var prefix = "data:" + resp.headers["content-type"] + ";base64,";
            var img = new Buffer(body.toString(), "binary").toString("base64");
           //  var img = new Buffer.from(body.toString(), "binary").toString("base64");
            var dataUri = prefix + img;
        }
    })
}

return axios.get('http://site.com/img.png', { responseType: 'arraybuffer' })
  .then(response => `data:${response.headers['content-type']};base64,${btoa(String.fromCharCode(...new Uint8Array(response.data)))}`);

return axios.get('http://site.com/img.png', { responseType: 'arraybuffer' })
  .then(response => `data:${response.headers['content-type']};base64,${btoa(String.fromCharCode(...new Uint8Array(response.data)))}`);

Version du nœud :

    return axios.get(url, { responseType: 'arraybuffer' }).then(res => {
      ;`data:${res.headers['content-type']};base64,${Buffer.from(String.fromCharCode(...new Uint8Array(res.data)), 'binary')
        .toString('base64')}`
    })

@voidpls
votre méthode provoque une erreur !
Uncaught RangeError: Maximum call stack size exceeded

il cause de
toa(String.fromCharCode(...new Uint8Array(response.data)))

tu peux essayer cette image