Convertir une image en chaîne Base64 à l'aide de JavaScript

Anika Tabassum Era 12 octobre 2023
  1. Utilisez canvas pour convertir une image en chaîne Base64 en JavaScript
  2. Utilisez FileReader pour convertir une image en chaîne Base64 à l’aide de JavaScript
Convertir une image en chaîne Base64 à l'aide de JavaScript

JavaScript a la convention de convertir une URL d’image ou une image d’un PC local en une chaîne base64. Cette chaîne peut avoir un grand nombre de symboles et de lettres.

Nous discuterons de la création d’un élément canvas, du chargement de l’image dedans et de l’utilisation de toDataURL pour afficher la représentation de la chaîne. Nous allons également essayer l’option file reader pour obtenir la représentation de la chaîne de caractères en base64.

Utilisez canvas pour convertir une image en chaîne Base64 en JavaScript

Dans ce cas, nous créons un élément canvas et définissons ses dimensions - la dataURL où nous stockerons la représentation sous forme de chaîne.

Nous ajouterons des images aléatoires à partir de sources en ligne, et pour éviter les problèmes de sécurité, nous assurerons le object.crossOrigin = 'Anonymous'. Enfin, notre fonction de rappel amènera la dataURL à la fonction toDataURL pour alerter la fenêtre de prévisualiser la chaîne base64 pour l’image correspondante.

Extrait de code:

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Test</title>
  <style>
    img{
      height: 200px;
    }
  </style>
</head>
<body>
 <img src="https://images.unsplash.com/photo-1606115915090-be18fea23ec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" id="myImg">
  <script>
  function toDataURL(src, callback){
    var image = new Image();
    image.crossOrigin = 'Anonymous';
 
    image.onload = function(){
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      canvas.height = this.naturalHeight;
      canvas.width = this.naturalWidth;
      context.drawImage(this, 0, 0);
      var dataURL = canvas.toDataURL('image/jpeg');
      callback(dataURL);
    };
    image.src = src;
  }
      toDataURL('https://images.unsplash.com/photo-1606115915090-be18fea23ec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80', function(dataURL){
        alert(dataURL);      
    })
  </script>
</body>
  
</html>

Production :

Utilisez canvas pour convertir une image en chaîne base64 en JavaScript

Utilisez FileReader pour convertir une image en chaîne Base64 à l’aide de JavaScript

Pour une convention de lecture de fichier, nous allons initialiser dynamiquement un nouvel objet. L’objet déclenchera la méthode onload et extraire la chaîne base64. Notre élément input prend les images de l’ordinateur local par téléchargement.

Extrait de code:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <input type="file" name="" id="fileId" 
        onchange="Uploaded()">
    <br><br>
    <button onclick="display()">
        Display String
    </button>
</body>
</html>
var base64String = '';
function Uploaded() {
  var file = document.querySelector('input[type=file]')['files'][0];
  var reader = new FileReader();
  reader.onload = function() {
    base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
    imageBase64Stringsep = base64String;
  } reader.readAsDataURL(file);
}
function display() {
  console.log('Base64String about to be printed');
  alert(base64String);
}

Production :

Utilisez FileReader pour convertir une image en chaîne base64 à l&rsquo;aide de JavaScript

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Article connexe - JavaScript Image