Html에서 로컬 폴더를 선택하면 폴더와 하위 폴더에 있는 모든 그림을 자동으로 읽어 페이지에 표시합니다.
기술적 분석:
문제가 있습니다웹 API 인터페이스 FileReader에서 readAsDataURL 메소드를 호출하여 데이터(이 함수 매개변수의 파일 태그로 얻은 파일 경로)를 읽은 다음 데이터를 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(){ /// 선택 파일을 가져옵니다. var selectFiles = document.getElementById(selectFiles).files; for(var file of selectFiles){ /// 파일 내용을 읽습니다. 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를 지지해 주시길 바랍니다.