Konvertieren eines Bildes in Base64-String mit JavaScript
-
Verwenden Sie
canvas, um das Bild in JavaScript in einen Base64-String zu konvertieren -
Verwenden Sie
FileReader, um das Bild mit JavaScript in eine Base64-Zeichenfolge zu konvertieren
JavaScript hat die Konvention, eine Bild-URL oder ein Bild von einem lokalen PC in eine Base64-Zeichenfolge zu konvertieren. Diese Zeichenfolge kann eine große Anzahl von Symbolen und Buchstaben enthalten.
Wir werden das Erstellen eines canvas-Elements besprechen, das Bild darin laden und toDataURL verwenden, um die String-Darstellung anzuzeigen. Wir werden auch die Option file reader ausprobieren, um die base64-String-Darstellung zu erhalten.
Verwenden Sie canvas, um das Bild in JavaScript in einen Base64-String zu konvertieren
In diesem Fall erstellen wir ein canvas-Element und definieren seine Abmessungen – die dataURL, in der wir die Zeichenkettendarstellung speichern.
Wir fügen zufällige Bilder aus Online-Quellen hinzu und stellen zur Vermeidung von Sicherheitsproblemen sicher, dass object.crossOrigin = 'Anonymous' ist. Schließlich bringt unsere Callback-Funktion die dataURL zur toDataURL-Funktion, um das Fenster darauf hinzuweisen, eine Vorschau der base64-Zeichenfolge für das entsprechende Bild anzuzeigen.
Code-Auszug:
<!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>
Ausgabe:
Verwenden Sie FileReader, um das Bild mit JavaScript in eine Base64-Zeichenfolge zu konvertieren
Für eine Konvention zum Lesen von Dateien initialisieren wir dynamisch ein neues Objekt. Das Objekt löst die onload-Methode aus und zeichnet den base64-String. Unser Eingabe-Element nimmt Bilder vom lokalen Computer durch Hochladen auf.
Code-Auszug:
<!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);
}
Ausgabe:
