HOWTO · JavaScript
Convierta una imagen en una cadena Base64 usando JavaScript
Este artículo discutirá cómo convertir una imagen a su representación de cadena base64 creando un lienzo y cargando la imagen en él, y usando el método de lectura de archivos para obtener la cadena correspondiente de una imagen.
JavaScript tiene la convención de convertir una URL de imagen o una imagen de una PC local a una cadena base64. Esta cadena puede tener una gran cantidad de símbolos y letras.
Discutiremos la creación de un elemento canvas, cargando la imagen en él y usando toDataURL para mostrar la representación de la cadena. También probaremos la opción file reader para obtener la representación de cadena base64.
Use canvas para convertir la imagen a una cadena Base64 en JavaScript
En este caso, creamos un elemento canvas y definimos sus dimensiones-el dataURL donde almacenaremos la representación de la cadena.
Agregaremos imágenes aleatorias de fuentes en línea y, para evitar problemas de seguridad, aseguraremos el object.crossOrigin = 'Anonymous'. Por último, nuestra función de devolución de llamada llevará el dataURL a la función toDataURL para alertar a la ventana para obtener una vista previa de la cadena base64 para la imagen correspondiente.
Fragmento de código:
<!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>
Producción:
Use FileReader para convertir la imagen a una cadena Base64 usando JavaScript
Para una convención de lectura de archivos, inicializaremos dinámicamente un nuevo objeto. El objeto activará el método onload y extraerá la cadena base64. Nuestro elemento input está tomando imágenes de la computadora local a través de la carga.
Fragmento de código:
<!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);
}
Producción:
