HTML-Beispielcode zum Lesen und Anzeigen von Bildern in einem lokalen Ordner
|
Ein Zweck Wählen Sie auf der HTML-Seite einen lokalen Ordner aus, um alle Bilder im Ordner und seinen Unterordnern automatisch zu lesen und auf der Seite anzuzeigen. Technische Analyse: Probleme
Lösung: Rufen Sie die Methode readAsDataURL in der Web-API-Schnittstelle FileReader auf, um die Daten zu lesen (den Dateipfad, der durch den Funktionsparameter file tag erhalten wurde), und laden Sie die Daten dann in FileReader (base64-Format). Danach können Sie Img verwenden, um die Quelldaten im base64-Format anzugeben und Bilder zu zeichnen. Zweiter Code
<!DOCTYPE html>
<html>
<Kopf>
<title>Bilddemo lesen</title>
</Kopf>
<Text>
<input type="file" id="selectFiles" onchange="dealSelectFiles()" mehrere Webkit-Verzeichnisse>
<canvas id="myCanvas" Breite=1440 Höhe=900></canvas>
<Skripttyp="text/javascript">
var imgPosX = 0;
var Bildbreite = 256;
Funktion dealSelectFiles(){
/// ausgewählte Dateien abrufen.
var selectFiles = document.getElementById("selectFiles").files;
für (var Datei von selectFiles) {
Konsole.log(Datei.webkitRelativePath);
/// Dateiinhalt lesen.
var reader = neuer FileReader();
reader.readAsDataURL(Datei);
reader.onloadend = Funktion(){
/// Dealdaten.
var img = neues Bild();
/// Nach dem Loader speichert das Ergebnis den Dateiinhalt des Ergebnisses.
img.src = dieses.Ergebnis;
img.onload = Funktion(){
var meineCanvas = document.getElementById("meineCanvas");
var cxt = myCanvas.getContext('2d');
cxt.drawImage(img, imgPosX, 0);
imgPosX += imgWidth;
}
}
}
}
</Skript>
</body>
</html>Drei Effekte
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Häufig verwendete JS-Funktionsmethoden im Frontend
>>: Detaillierte Erklärung der scp- und sftp-Befehle unter Linux
Artikel empfehlen
MySQL 8.0.12 Installations- und Konfigurations-Tutorial
Dieser Artikel enthält das ausführliche Tutorial ...
InnoDB-Typ MySql stellt Tabellenstruktur und Daten wieder her
Voraussetzung: Speichern Sie die .frm- und .ibd-D...
Daten in der Layui-Tabellenzeile dynamisch bearbeiten
Inhaltsverzeichnis Vorwort Stil Funktion Beschrei...
Beispiel für eine MySQL-Datenbank-übergreifende Transaktions-XA-Operation
In diesem Artikel wird die MySQL-Datenbank-übergr...
Beispielcode zur Eingabe des Kennzeichens und der Provinzkürzel in html
Das Prinzip besteht darin, zuerst ein Div mit ein...
Tutorial zum Herunterladen und Installieren von MySQL 8.0.12 WinX64
MySQL 8.0.12 Download- und Installations-Tutorial...
MySQL 8.0.11 Installationshandbuch für Mac
MAC installiert mysql8.0, der spezifische Inhalt ...
Der Prozess zum Erstellen eines Jenkins-Projekts unter Linux (am Beispiel von CentOS 7)
Nehmen Sie als Beispiel die Bereitstellung von ht...
So vergessen Sie das Passwort von Jenkins in Linux
1. Jenkins-Installationsschritte: https://www.jb5...
Kontext und Eigenschaften von React erklärt
Inhaltsverzeichnis 1. Kontext 1. Anwendungsszenar...
Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil
Die Bedeutung der Schreibreihenfolge Reduzieren S...
Was ist ein MIME-TYP? MIME-Typen-Typensammlung
Was ist ein MIME-TYP? 1. Zunächst müssen wir verst...
Detaillierte Erklärung zur Verwendung des <meta>-Tags in HTML
Wenn wir möchten, dass mehr Leute die von uns ers...
HTML setzt Fett-, Kursiv-, Unterstrichen-, Durchstreich- und andere Schrifteffekte
<p><b>Dies ist eine fette Schriftart&l...
Optimierung des HTML-Eingabefelds zur Verbesserung des Benutzererlebnisses und der Benutzerfreundlichkeit
Um das Benutzererlebnis und die Benutzerfreundlich...