Wählen Sie einen lokalen Ordner in HTML aus, lesen Sie automatisch alle Bilder im Ordner und in den Unterordnern und zeigen Sie sie auf der Seite an.
Technische Analyse:
Es gibt ein ProblemRufen Sie die readAsDataURL-Methode in der Web-API-Schnittstelle FileReader auf, um die Daten (den durch das Datei-Tag dieses Funktionsparameters erhaltenen Dateipfad) zu lesen, und laden Sie die Daten dann in den FileReader (Base64-Format). Anschließend können Sie Img verwenden Geben Sie die Quelldaten im Base64-Format an. Bilder können gezeichnet werden.
Zwei Codes <!DOCTYPE html><html><head> <title>ReadImageDemo</title></head><body> <input type=file id=selectFiles onchange=dealSelectFiles() multiple webkitdirectory> <canvas id=myCanvas width=1440 height=900></canvas> <script type=text/javascript> var imgPosX = 0; 256; Funktion dealSelectFiles(){ /// ausgewählte Dateien abrufen. var selectFiles = document.getElementById(selectFiles).files; for(var file of selectFiles){ console.log(file.webkitRelativePath); var Reader = new FileReader(); Reader.onloadend = function(){ /// Deal Data Image(); /// Ergebnisspeicherung des Dateiinhalts result. '2d'); cxt.drawImage(img, imgPosX, 0); } } } </script></body></html> drei EffekteDas Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.