Gostaria de saber como converter uma img em Base64, e como faço para importar em um arquivo JSON. Obs: Usando Javascript puro ou Jquery.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Gostaria de saber como converter uma img em Base64, e como faço para importar em um arquivo JSON. Obs: Usando Javascript puro ou Jquery.
Bom dia,
Li no StackOverflow que dá para fazer usando canvas do HTML 5, segue exemplo:
Exemplo do HTML:
<img id=imageid src=https://www.google.de/images/srpr/logo11w.png>Exemplo do JS:
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
var base64 = getBase64Image(document.getElementById("imageid"));Quanto a parte do JSON, você pode criar uma string como essa:
var texto = '{ "imagem" : { ' +
'"nomeArquivo": "imagem.png", ' +
'"base64": ' + base64 + ' } }';E depois utilizar a função nativa do JS abaixo:
var objetoJSON = JSON.parse(texto);Espero ter ajudado, abraço.