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.