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
Detaillierte Beispiele für den Unterschied zwischen den Methoden watch und computed in Vue.js
Inhaltsverzeichnis Vorwort einführen 1. Wirkungsm...
Element Tabelle Tabellenkomponente Mehrfeld (Mehrspalten) Sortiermethode
Inhaltsverzeichnis brauchen: Aufgetretene Problem...
Eine erfahrene Person zeigt Ihnen, wie Sie ein professionelles und standardisiertes MySQL-Startskript entwickeln
Jeder qualifizierte Linux-Betriebs- und Wartungsm...
Verwendung des Linux-Befehls „cal“
1. Befehlseinführung Mit dem Befehl cal (Kalender...
Die umfassendste Erklärung des Sperrmechanismus in MySQL
Inhaltsverzeichnis Vorwort Globale Sperre Vollstä...
So schreiben Sie die übergeordneten und untergeordneten Verzeichnisse von relativen HTML-Pfaden
So geben Sie das übergeordnete Verzeichnis an ../ ...
Vue2.x-Reaktionsfähigkeit – einfache Erklärung und Beispiele
1. Überprüfen Sie die Vue-Responsive-Nutzung Die...
Implementierung der Wiederaufnahme des K8S-Knotens in den Master-Cluster
1. Knoten löschen Führen Sie kubectl delete node ...
Verwendung der MySQL-Zeitdifferenzfunktionen TIMESTAMPDIFF und DATEDIFF
Verwendung der Zeitdifferenzfunktionen TIMESTAMPD...
Detaillierte Erklärung des Befehlsmodus in der Javascript-Praxis
Inhaltsverzeichnis Definition Struktur Beispiele ...
Installations- und Bereitstellungstutorial der neuesten MySQL-Version 5.7.17 (64-Bit-ZIP-Green-Version) unter Win 8 oder höher
Zunächst einmal spielt der Blogger die Community-...
Eine detaillierte Anleitung zu benutzerdefinierten Anweisungen in Vue
Inhaltsverzeichnis 1. Was ist eine benutzerdefini...
Tutorial zur Bedienung und Wartung von Linux, grundlegende Swap-Partition und LVM-Verwaltung
Inhaltsverzeichnis 1. Swap-Partition SWAP 1.1 Aus...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27
Detailliertes Download-, Installations- und Konfi...
Ideen und Codes zur Implementierung der Vuex-Datenpersistenz
Was ist Vuex vuex: ist ein speziell für vue.js en...