Convertir une image en chaîne Base64 à l'aide de JavaScript
-
Utilisez
canvaspour convertir une image en chaîne Base64 en JavaScript -
Utilisez
FileReaderpour 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 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 :
