Html 上でローカル フォルダーを選択すると、そのフォルダーとサブフォルダー内のすべての画像が自動的に読み込まれ、ページ上に表示されます。
テクニカル分析:
問題がありますWeb API インターフェイス FileReader の readAsDataURL メソッドを呼び出してデータ (この関数パラメータの file タグによって取得されたファイル パス) を読み取り、その後、Img を使用してデータを FileReader (base64 形式) にロードできます。ソースデータをbase64形式で指定すると描画できます。
2つのコード <!DOCTYPE html><html><head> <title>ReadImageDemo</title></head><body> <input type=file id=selectFiles onchange=dealSelectFiles() 複数の Webkitdirectory> <canvas id=myCanvas width=1440 height=900></canvas><script type=text/javascript> var imgPosX = 0; 256; function dealSelectFiles(){ /// 選択ファイルを取得します。 var selectFiles = document.getElementById(selectFiles).files; for(var file of selectFiles){ /// ファイルの内容を読み取ります。 var Reader = new FileReader(); Reader.readAsDataURL(file); Reader.onloadend = function(){ /// var img = new Image(); /// ローダー後、ファイルの内容を保存します。 img.onload = function(){ var myCanvas = document.getElementById(myCanvas); '2d'); cxt.drawImage(img, imgPosX, 0); </script></body></html> 3つの効果以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。