เลือกโฟลเดอร์ในเครื่องบน Html อ่านรูปภาพทั้งหมดในโฟลเดอร์และโฟลเดอร์ย่อยโดยอัตโนมัติ และแสดงรูปภาพเหล่านั้นบนเพจ
การวิเคราะห์ทางเทคนิค:
มีปัญหาเกิดขึ้นเรียกใช้เมธอด readAsDataURL ในอินเทอร์เฟซ Web API FileReader เพื่ออ่านข้อมูล (เส้นทางไฟล์ที่ได้รับจากแท็กไฟล์ของพารามิเตอร์ฟังก์ชันนี้) จากนั้นโหลดข้อมูลลงใน FileReader (รูปแบบ base64) หลังจากนั้น คุณสามารถใช้ Img to ระบุแหล่งข้อมูลในรูปแบบ base64 สามารถวาดภาพได้
สองรหัส <!DOCTYPE html><html><head> <title>ReadImageDemo</title></head><body> <input type=file id=selectFiles onchange=dealSelectFiles() หลาย webkitdirectory> <canvas id=myCanvas width=1440 ความสูง=900></canvas> <script type=text/javascript> var imgPosX = 0; var imgWidth = 256; function dealSelectFiles(){ /// รับไฟล์ที่เลือก var selectFiles = document.getElementById(selectFiles).files; for(var file of selectFiles){ console.log(file.webkitRelativePath); /// อ่านเนื้อหาไฟล์ var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function(){ /// จัดการข้อมูล Image(); /// หลังจากตัวโหลด ผลลัพธ์จะเก็บผลลัพธ์เนื้อหาไฟล์ img.src = this.result; img.onload = function(){ var myCanvas = document.getElementById(myCanvas); '2d'); cxt.drawImage(img, imgPosX, 0); imgPosX += imgWidth } } } } </script></body></html> สามเอฟเฟกต์ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network