Blob in JavaScript
In diesem Artikel lernen wir das Objekt Blob kennen und sehen, wie es im JavaScript-Quellcode funktioniert. Anhand eines Beispiels sehen wir, wie ein Blob die Dateidaten in JavaScript enthält.
Blob in JavaScript
In JavaScript verwenden wir Blob, um die Daten als Objekt in einer Datei zu speichern. Es hält die Daten einfach in einer Gruppe von Bytes und hat seine eigene Größe wie eine einfache Datei.
Je nach Blobgröße und Browserfunktionen werden die Blobdaten im Arbeitsspeicher und im Dateisystem gespeichert. Wir können den Inhalt des Blobs leicht als Array-Puffer lesen, wodurch Blob besser geeignet ist, die Daten in binärer Form zu speichern.
Um den Inhalt eines Blobs anzuzeigen, können wir Blob einfach als URL für <a>, <img> oder andere Element-Tags in HTML verwenden.
Hier ist die grundlegende Syntax des Blob-Objekts in JavaScript:
var myBlob = new Blob(['Content of Blob'], {type: 'text/plain'});
Beispielcode:
Ein Blob kann mit dem Objekt createObjectURL() bezogen werden, auf das die Blob-URL zeigt.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Blob
</title>
</head>
<body>
<script>
let blobContent = new Blob(["DelftStack is a best website to learn programming!"],
{ type: 'text/plain' }); //blob file content and type
link.href = URL.createObjectURL(blobContent);
</script>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript Create Blob Object and Download File</h3>
<p>Click on link to to download the file</p>
<a download="dummyFile.txt" href='#' id="link">Download File</a> //file name
</body>
</html>
Ausgang:
Wie oben in der HTML-Quelle gezeigt, haben wir das Blob-Objekt blobContent in den <script></script>-Tags erstellt. Wir haben den Inhalt und den Inhaltstyp unserer Datei definiert.
Mittels createObjectURL() haben wir einen blobContent als URL erhalten und mit href verlinkt. Wir haben Anker-Tags mit #href='#' und id=link verwendet, um die Datei dummy.txt herunterzuladen.
Sie können die obige Quelle mit der Erweiterung HTML speichern und im Browser öffnen, dann auf den Link zum Herunterladen der Datei klicken und die Downloads anzeigen. Es wird eine Textdatei dummyFile.txt geben.
Vorteile von Blob in JavaScript
Nachfolgend sind einige Vorteile der Verwendung eines Blob-Objekts in JavaScript aufgeführt:
- Blobs können leicht referenziert werden.
- Um einer Datenbank größere binäre Datendateien hinzuzufügen, sind Blobs die beste Option zum Hinzufügen großer binärer Datendateien.
- Wir können Zugriffsrechte bei der Verwendung von Blobs einfach festlegen.
- Backup von Datenbanken enthält alle Daten während der Verwendung von Blobs.
Blob zu Base64
Es ist nützlich, JavaScript-Dateiobjekte oder Blobs in Base64-Zeichenfolgen zu konvertieren, während zeichenfolgenbasierte Daten auf den Server hochgeladen werden. Wir können JavaScript verwenden, um einen Base64-String und eine DataURL aus einem Dateiobjekt zu konvertieren.
Wir können Blob in eine Base64-codierte Zeichenfolge konvertieren, und diese Codierung stellt Binärdaten als Zeichenfolge dar. Und wir können diese Kodierung in Daten-URLs verwenden.
Grundlegende Syntax:
const convertBlobToBase64 = async (blob) => { // blob data
const reader = new FileReader();
let result = reader.readAsDataURL(blob);
}
Blob zu Bild
Mit JavaScript können wir einen Blob eines Bildes oder eines Bildteils erstellen. Wir verwenden das canvas-Element, um Bildoperationen wie das Erstellen eines Bildes oder seiner Teile durchzuführen.
Grundlegende Syntax:
let myblob =
await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
Blob-zu-Array-Puffer
Einschließlich einer beliebigen Pufferquelle ermöglicht der Blob-Konstruktor das Generieren eines Blobs aus allem. Wir können den Array-Puffer der untersten Ebene aus Blob mit blob.arrayBuffer() generieren.
Grundlegende Syntax:
const mybufferPromise = await myblob.arrayBuffer();