unable to convert image to Base64 format in javascript

Question

I'm a complete beginner in javascript and I am using the pokemon api https://pokeapi.co/ to get pokemon images . After I get an image I try to convert it to base64 format but I get the error

pokemon.js:29 Uncaught (in promise) ReferenceError: getBase64 is not defined

I have looked at other answers here about similar issues with this but I am a beginner and cannot understand well .

My code :

var pokeInfo=[];
var pokepics=[];
var pokemon;

//get a pokemon by id 
async function fetchPokemon(pokemonID){
  
    var response = await fetch('https://pokeapi.co/api/v2/pokemon/'+pokemonID.toString()+'/');
    var poke = await response.json();
    pokeInfo.push(poke);
}


//get many  pokemon 
async function fetchManyPokemon(count){

    for(var i=1;i<=count;i++){

        await fetchPokemon(count);      
    }
}

//get pokemon image 
async function fetchPokemonImage(pokemonInfo){

    var imageUrl = pokemonInfo.sprites.front_default; //select image 
    var imageResponse = await fetch(imageUrl); //fetch image
    var image = await imageResponse.blob(); // get response image
    //error is here 
    var base64 = await getBase64(image); //convert image to base 64 format 

    pokepics.push(base64);


}


async function fetchPokemonImages(){  //fetch number of pokemon images 

    for(var l =0;l<pokeInfo.length;l++){
    
        await fetchPokemonImage(pokeInfo[l]);
    }
}

I would appreciate your help with guiding me through this issue . Thank you in advance .

There is no getBase64 function in this scope, there is also no getBase64 function in the standard JS library. Are you trying to import it from somewhere? — ngr900
– ngr900, Commented Jul 7, 2020 at 13:07
@ngr900 I am following a tutorial it is written this way exactly link :coderdojo.gitbooks.io/advanced-javascript-sushi/content/en/… — Vasilis Skentos
– Vasilis Skentos, Commented Jul 7, 2020 at 13:08
btw why do you want to get it as base64? You already have an image url - why not just display that? — MauriceNino
– MauriceNino, Commented Jul 7, 2020 at 13:12
Frankly I have no idea what they're doing over there, there is no function like this in JS and they're not showing any imports or its declaration. My guess would be that the person writing this tutorial defined it in their code and then forgot to include it in the tutorial. — ngr900
– ngr900, Commented Jul 7, 2020 at 13:12

Bar Levin · Accepted Answer · 2020-07-07 13:08:44Z

1

There is no getBase64() in js , You should try that way:

function toBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     console.log(reader.result);
   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}

answered Jul 7, 2020 at 13:08

Bar Levin

2151 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vasilis Skentos Over a year ago

that's weird the tutorial I am following has that method link:coderdojo.gitbooks.io/advanced-javascript-sushi/content/en/…

Bar Levin Over a year ago

that is really weird , unless we missed anything in there

Collectives™ on Stack Overflow

unable to convert image to Base64 format in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related