0

I'm getting svg flag from the json api and converting it into base64 svg but I want the result base64 in png format, is this possible to get base64 in png from svg image url?

Here is my code

let tabsCol = document.createElement('div');
tabsCol.className = 'tabsColumn';
function countries(){
    let fetchRes = fetch(
        "https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/index.json");
        // fetchRes is the promise to resolve
        // it by using.then() method
        fetchRes.then(res =>
        res.json()).then(d => {
        // console.log(d)
        for(let i=0;i<d.length;i++){
            // console.log(`${d[i]['image']}`)
            flag += `<fieldset id="orientationform">
            <div>
              <input type="radio" id="${d[i]['code']}" class="orientation-input" name="orientation4" value="${d[i]['name']}" onchange="getSelectedFlag('${d[i]['image']}')">
              <label for="${d[i]['code']}"><span></span></label>
            </div>
            <div>
                <strong>${d[i]['name']}</strong> <br>
            </div>
            <img src="${d[i]['image']}" srcset="${d[i]['image']},
            ${d[i]['image']}" width="40" height="40" alt="${d[i]['value']}">
          </fieldset>        
            `
        }
        })
    
}

flagTab.onclick = function(){
    flag = ``;
    countries()
    setTimeout(() => {
        // console.log('flag',flag)    
        if(flagTabContent.children.length == 0){
            tabsCol.innerHTML = flag;
            flagTabContent.append(tabsCol);           
        }      
    }, 100);
}


function getSelectedFlag(url){
    // console.log(url)
    getBase64FromUrl(url).then(data=>{
        console.log(`flag:${data}`);
        app.contentWindow.postMessage(`flag:${data}`,'*');
    });
}

The data variable returns the base64 in svg format but I want base64 in png format.

How can I do this?

Any help will be highly appriciated.

Thank you.

  • Why do you need a `png` format? Shouldn't `svg` work fine? – Reyno Jan 11 '23 at 09:46
  • thanks for asking, because I have to send this base64 message to playcanvas developer, he needs in png format. – Sarfraz Rasheed Jan 11 '23 at 10:04
  • svg base64 not working in playcanvas. Is there any way to convert base64 of svg string into png format? – Sarfraz Rasheed Jan 11 '23 at 10:06
  • 1
    https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser https://stackoverflow.com/questions/46814480/how-can-convert-a-base64-svg-image-to-base64-image-png – Flewz Jan 11 '23 at 12:15

0 Answers0