一 目的
在Html上選擇本地文件夾，自動讀取文件夾及子文件夾下的所有圖片并顯示在頁面。
技術分析：
存在問題
解決方法：
調用Web API接口FileReader中readAsDataURL方法讀取數據（這個函數參數file標簽獲取到的文件路徑），然后把數據加載到FileReader中（base64格式），之后就可以用Img來指定源時base64格式的數據，可以繪制圖片。
二 代碼
<!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; var imgWidth = 256; function dealSelectFiles(){ /// get select files. var selectFiles = document.getElementById("selectFiles").files; for(var file of selectFiles){ console.log(file.webkitRelativePath); /// read file content. var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function(){ /// deal data. var img = new Image(); /// after loader, result storage the file content result. img.src = this.result; img.onload = function(){ var myCanvas = document.getElementById("myCanvas"); var cxt = myCanvas.getContext('2d'); cxt.drawImage(img, imgPosX, 0); imgPosX += imgWidth; } } } } </script></body></html>三 效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
