Salvar base64 de imagem em js

1. Salvar base64 de imagem em js

lenilsonlm
(usa Outra)

Enviado em 07/02/2022 - 18:45h

Eu tenho a url (file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540lenilsonlima%252Fimage/ImagePicker/173331c3-3e96-42d6-90f6-6d89939ec583.jpg) da imagem e gostaria de salvar a base64 dela em uma variável para enviar para o servidor

0 0

Quote

2. Re: Salvar base64 de imagem em js

SamL
(usa XUbuntu)

Enviado em 07/02/2022 - 19:00h

Veja aqui:
https://stackoverflow.com/questions/22172604/convert-image-url-to-base64

1 0

Quote

3. Re: Salvar base64 de imagem em js

removido
(usa Nenhuma)

Enviado em 08/02/2022 - 09:21h

O JavaScript rodando no Browser não tem acesso ao sistema de arquivos do sistema operacional.

Nesse caso, pegar um arquivo direto da sua máquina pelo JavaScript não vai funcionar. Tu vai precisar criar um input para fazer upload de arquivo antes de converter a imagem em base64.

Ou jogar esse arquivo em algum servidor externo, e fazer fetch para pegar o blob e transformá-lo em base64.

De qualquer forma, fiz uma página bem simples com um input. Ai você adapta para o seu caso:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <label for="foto">Envie o arquivo</label>

    <input name="foto" type="file" accept="image/*" value="" />

</body>

<script>

    const fotoElement = document.querySelector('input[name=foto]')



    fotoElement.addEventListener('change', e => {

        const file = e.target.files[0]



        if(!file) {

            return alert('Nenhum arquivo enviado')

        }



        fileToBase64(file, dataUri => {

            // Variável com o base64 do arquivo enviado

            const base64 = dataUri.replace(/^.*base64,/, '')

            console.log('Base64: ', base64)

        })

    })



    const fileToBase64 = (file, callback) => {

        const reader = new FileReader()



        reader.readAsDataURL(file);

        reader.onload = () => {

            callback(reader.result)

        }



        reader.onerror = error => {

            console.log('Error: ', error);

        }

    }

</script>

</html>