Lesen Sie Bilder und Daten mithilfe von Leinwand und JavaScript

In diesem Video nehme ich Sie auf eine Reise durch die Grundlagen, wie Sie in Bilddaten mithilfe von JavaScript dynamisch lesen können. Zusammen werden wir untersuchen, wie Sie Bilddaten auf drei verschiedene Arten lesen - von einem bestimmten Dateinamen auf Ihrem Server, mithilfe des Felds HTML -Datei -Upload und über Drag & Drop in das Fenster. Dieses Video ist eine der neuesten Lektionen aus dem Kurs über „Manipulieren und Verwenden von Bildern und Videos mit JavaScript“ von Patrick Catanzariti. Dieser Kurs ist derzeit auf der Lernplattform von SitePoint Learnable.com verfügbar! Die Leinwand Tag, Video -Tag und JavaScript sind ein unglaubliches Team, das Ihren Web -Kreationen ein ganz neues Maß an Möglichkeiten bieten kann. Im Kurs „Manipulieren und Verwenden von Bildern und Videoen mit JavaScript“ erfahren Sie alles darüber, wie Sie Bilder und Video mithilfe von HTML5 und JavaScript beziehen und manipulieren. Wir werden eine Reihe von Möglichkeiten untersuchen, von der Änderung der Grundfarben zum Manipulieren von Videodaten mithilfe von JavaScript -Bibliotheken wie drei.js. Dieser Kurs ist hier verfügbar.

häufig gestellte Fragen (FAQs) zum Lesen von Bilderndaten mithilfe von Canvas und JavaScript

Wie kann ich die FileReader -API verwenden, um Bilddaten in JavaScript zu lesen? Benutzer des Benutzers. Um Bilddaten zu lesen, können Sie die meetasDataurl -Methode verwenden, die den Inhalt des angegebenen Blobs oder der angegebenen Datei liest. Wenn die Lesevorrichtung abgeschlossen ist, enthält das Ergebnisattribut eine Daten: URL, die die Daten der Datei darstellt. Datei "] ''); Image ();

img.src = e.target.result; . Reader.ReadasDataurl (Datei);

};

In diesem Code wählen wir zunächst die Dateieingabe aus und erstellen einen neuen Filereader. Wir haben dann ein Onload -Ereignis für den Leser eingerichtet, der ein neues Bild erstellt und seine Quelle auf das Ergebnis des Lesevorgangs festlegt. Schließlich richten wir ein Onchange -Ereignis für die Eingabe ein, in der die ausgewählte Datei als Daten -URL liest, wenn der Benutzer eine Datei auswählt.

Wie kann ich Text aus einem Bild mit JavaScript extrahieren? JavaScript verfügt nicht über integrierte OCR-Funktionen, aber es gibt Bibliotheken, die dabei helfen können, wie z. Ein Bild:

Sei Tesseract = Request ('Tesseract.js'); 'Image.png',
'Eng',
{logger: m => console.log (m)}
). Dann (({Daten: {text}}) => {
console.log (text); Anschließend nennen wir die Erkennungsmethode, geben in die Bilddatei, die Sprache („Eng“ für Englisch) und eine Logger -Funktion, die den Fortschritt der Erkennung protokolliert. Wenn die Erkennung abgeschlossen ist, wird das Versprechen mit einem Objekt gelöst, das den erkannten Text enthält, den wir bei der Konsole protokollieren. Qualität des Bildes und des Textes darin. Filereader beinhaltet das Lesen der Bilddatei und das anschließende Anzeigen in einem HTML -Element. Hier ist ein einfaches Beispiel:

let Input = document.querySelector ('input [type = "file"]'); > leser = new fileReader ();

reader.onload = Funktion (e) {
preview.src = E.Target.Result; ;
};

In diesem Code wählen wir zunächst die Dateieingabe und das Bildelement aus, mit dem die Vorschau angezeigt wird. Anschließend erstellen wir einen neuen Filerader und richten ein Onload -Ereignis ein, das die Quelle des Vorschaubilds auf das Ergebnis des Lesevorgangs festlegt. Schließlich richten wir ein Onchange -Ereignis für die Eingabe ein, mit der die ausgewählte Datei als Daten -URL liest, wenn der Benutzer eine Datei auswählt. Sie möchten mehrere Dateien lesen. Sie können dies tun, indem Sie das Dateienarray der Dateieingabe überschreiten. Hier ist ein Beispiel:

let Input = document.querySelector ('input [type = "file"]'); i = 0; {
console.log (e.target.result); 🎜>
In diesem Code wählen wir zunächst die Dateieingabe aus. Anschließend haben wir ein Onchange -Ereignis für die Eingabe eingerichtet, die über die ausgewählten Dateien abschließt, für jede einzelne neue Fileeader erstellt und jede Datei als Daten -URL liest. Das Ergebnis jeder Lesevorrichtung ist an der Konsole protokolliert.

Wie kann ich Fehler bewältigen, wenn ich Dateien mit JavaScript FileReader lese? Hier ist ein Beispiel dafür, wie Sie diese Ereignisse verwenden können:

Sei input = document.querySelector ('Eingabe [type = "file"]');
leser = new FileReader ();

reader.onload = Funktion (e) {
console.log (e.target.result); 🎜>};

reader.onabort = function () {
console.Error ('Die Lesevorrichtung war abgebrochen. ');
};

In diesem Code wählen wir zunächst die Dateieingabe aus und erstellen einen neuen FileReader. Wir haben dann Onload-, OnError- und Onabort -Ereignisse für den Leser eingerichtet. Das Onload -Ereignis protokolliert das Ergebnis des Lesevorgangs, während die Protokollmeldungen von OnError- und Onabort -Ereignissen. Schließlich richten wir ein Onchange -Ereignis für die Eingabe ein, mit der die ausgewählte Datei als Daten -URL liest, wenn der Benutzer eine Datei auswählt.

Das obige ist der detaillierte Inhalt vonLesen Sie Bilder und Daten mithilfe von Leinwand und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!