Tuto Javascript

Convertir une image en base 64 en Javascript

Pourquoi encoder en base 64 ? L'encodage en base 64 (côté client) peut être utilisé pour convertir par exemple une image JPG ou PNG sur le navigateur d'un utilisateur afin de la transférer sans risque côté serveur et pouvoir ensuite la traiter sous forme de string (chaine de caractère) ou de text contenu dans un JSON avec un langage de programmation type PHP, Python, Java, Powershell... L'image encodée en base 64 peut éventuellement être stockée dans une base de donnée (MYSQL, SQL Server, Oracle...) avec précaution car la chaîne générée peut parfois atteindre plusieurs dizaines de MO en fonction de la taille initiale de l'image. Dans l'exemple ci dessous on peut directement sélectionner une image de son PC depuis le navigateur. Une fois l'image sélectionnée, elle se convertira automatiquement au format base 64 grâce à la fonction Javascript "imgTobase64".

Exemple de conversion d'image en Base 64 avec Javascript

<!DOCTYPE html>
<html>
<head>
<title>Conversion d'une image en base 64</title>
</head>
    <body>
        <img id="result" height="150px">
        <input type="file" accept="image/*" onchange="imgTobase64(event)">
        <script>
            function imgTobase64(event) {
                var reader = new FileReader();
                reader.onload = function(){
                    var output = document.getElementById('result');
                    output.src = reader.result;
                }
                reader.readAsDataURL(event.target.files[0]);
            }
        </script>
    </body>
</html>