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-Datenbankdesign: Detaillierte Erläuterung der Schema-Operationsmethode mit Python
Bevor der Pfeil abgeschossen wurde, flüsterte der...
Implementierungsbeispiel für die Bereitstellung von Docker rocketmq
Inhaltsverzeichnis Vorbereitung Bereitstellungspr...
Beispiel für einen WeChat-Applet-Rechner
In diesem Artikel wird der spezifische Code des W...
Einige Schlussfolgerungen zur Entwicklung mobiler Websites
Die mobile Version der Website sollte zumindest ü...
So verwenden Sie Docker Compose zum Erstellen eines FastDFS-Dateiservers
Im vorherigen Artikel wurde ein ausführliches Bei...
Der Unterschied zwischen Anzeige, Sichtbarkeit, Deckkraft, RGBA und Z-Index: -1 in CSS
Wir müssen oft die versteckten, transparenten und...
Beschränken Sie die Eingabe in HTML-Textfelder auf Zahlen und Dezimalstellen.
Code: <input Typ="text" Klasse="...
Containerisierungstransformation für Docker-Großprojekte
Virtualisierung und Containerisierung sind zwei u...
JavaScript-Code zur Implementierung eines einfachen Rechners
In diesem Artikelbeispiel wird der spezifische Ja...
Organisieren Sie die allgemeinen Wissenspunkte von CocosCreator
Inhaltsverzeichnis 1. Szene laden 2. Knoten suche...
Detailliertes Tutorial zum Anpassen des Installationspfads der MySQL-Version 5.7.18 (Installation von Binärpaketen)
Installationspfad: /application/mysql-5.7.18 1. V...
So schreiben Sie eine Node.JS-Version eines Spiels
Inhaltsverzeichnis Überblick Build-Prozess Verwan...
CSS3 erstellt eine Webanimation, um einen springenden Balleffekt zu erzielen
Grundlegende Vorbereitung Für diese Implementieru...
js, um einen interessanten Countdown-Effekt zu erzielen
js interessanter Countdown-Fall. Zu Ihrer Informa...
Detailliertes Tutorial zur Installation von OpenStack Ussuri in CentOS8 mit minimaler Bereitstellung
Das Tutorial zur Installation von OpenStack Ussur...