Búsqueda de sitios web

javascript - Descargar una imagen usando Axios y convertirla a base64

Necesito descargar una imagen .jpg desde un servidor remoto y convertirla en formato base64. Estoy usando axios como mi cliente HTTP. He intentado hacer una solicitud git al servidor y revisar el response.data, sin embargo, parece que no funciona de esa manera.

Enlace a axios: https://github.com/mzabriskie/axios

Enlace a la implementación de base64: https://www.npmjs.com/package/base-64

Estoy usando NodeJS/React, así que atob/btoa no funciona, de ahí la biblioteca.

axios.get('http://placehold.it/32').then(response => {
    console.log(response.data); // Blank
    console.log(response.data == null); // False 
    console.log(base64.encode(response.data); // Blank
}).catch(err => console.log(err));

Respuesta #1

Esto funcionó muy bien para mí:

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

Respuesta #2

Puede que haya una mejor manera de hacer esto, pero lo he hecho así (sin las partes adicionales como catch(), etc.):

axios.get(imageUrl, { responseType:"blob" })
    .then(function (response) {

        var reader = new window.FileReader();
        reader.readAsDataURL(response.data); 
        reader.onload = function() {

            var imageDataUrl = reader.result;
            imageElement.setAttribute("src", imageDataUrl);

        }
    });

Tengo la sospecha de que al menos parte de tu problema podría estar del lado del servidor. Incluso sin configurar { responseType: "blob" } deberías haber tenido algo en tu salida de response.data.

Respuesta #3

Esto es lo que me funciona (con Buffer.from) -

axios
  .get(externalUrl, {
    responseType: 'arraybuffer'
  })
  .then(response => {
    const buffer = Buffer.from(response.data, 'base64');
  })
  .catch(ex => {
    console.error(ex);
  });

Respuesta #4

usar responseType: "text", responseEncoding: "base64" obtendrá el cuerpo de la respuesta codificado como cadena base64

por ejemplo, el código de muestra obtendrá base64 y escribirá un archivo jpg en el disco.

import axios from "axios";
import fs from "fs";

axios
  .get("https://picsum.photos/255", {
    responseType: "text",
    responseEncoding: "base64",
  })
  .then((resp) => {
    console.log(resp.data);
    fs.writeFileSync("./test.jpg", resp.data, { encoding: "base64" });
  })

Artículos relacionados