Convertire una immagine in base64 con Javascript

Mattepuffo's logo
Convertire una immagine in base64 con Javascript

Convertire una immagine in base64 con Javascript

Programmazione, Javascript - AJAX

Quello che vedremo oggi è come convertire una immagine in base64 usando Javscript.

Ci sono vari modi per farlo, e noi useremo FileReader.

Metteremo una input di tipo file per scegliere l'immagine; ed un bottone che lancia la funzione.

Poi visualizzeremo l'immagine e sotto il codice base64.

Ecco il codice completo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Image to base64</title>
        <script>
            function onBtnClick() {
                var reader = new FileReader();
                var file = document.querySelector('input[type=file]').files[0];
                var resultDiv = document.querySelector('#result_div');
                var resultImg = document.querySelector('#result_img');
                reader.addEventListener("load", function () {
                    resultImg.src = reader.result;
                    resultDiv.innerHTML = reader.result;
                }, false);
                reader.readAsDataURL(file);
            }
        </script>
    </head>
    <body>
        <label><b>Immagine</b></label>
        <input type="file" id="img" name="img">
        <br>
        <button type="button" onclick="onBtnClick();">Invia</button>
        <br>
        <img src="" id="result_img" width="500">
        <br>
        <div id="result_div"></div>
    </body>
</html>

Come vedete non abbiamo usato librerie esterne.

Leggete la documentazione di FileReader per vedere gli altri metodi / opzioni; è un oggetto molto interessante.

Enjoy!

Condividi

Commentami!