js获取本地文件夹中的所有png文件并分页显示

要获取本地文件夹中所有的 PNG 文件并进行分页显示，可以使用 JavaScript 的 File API 和 HTML5 的 Canvas API 实现。

首先，需要使用 `input` 元素来获取用户选择的文件夹：

<input type="file" id="file-input" webkitdirectory directory multiple accept=".png">

其中，`webkitdirectory` 和 `directory` 属性用于指定选择文件夹，`multiple` 属性用于允许选择多个文件，`accept` 属性用于限制文件类型为 `.png`。

接着，在 JavaScript 中监听 `change` 事件，获取用户选择的文件夹中的所有 PNG 文件：

const fileInput = document.getElementById('file-input');
const images = [];

fileInput.addEventListener('change', () => {
  const files = fileInput.files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    if (file.type === 'image/png') {
      images.push(file);
    }
  }
});

这段代码将所有符合条件的文件存储在 `images` 数组中。

接下来，使用 Canvas API 对 PNG 文件进行分页显示。我们可以将每个 PNG 文件转换为图片对象，然后在 Canvas 上绘制。以下是一个简单的分页显示示例：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const PAGE_SIZE = 9; // 每页显示 9 张图片
let currentPage = 1;

function drawPage(page) {
  const startIndex = (page - 1) * PAGE_SIZE;
  const endIndex = startIndex + PAGE_SIZE;
  for (let i = startIndex; i < endIndex && i < images.length; i++) {
    const image = new Image();
    image.src = URL.createObjectURL(images[i]);
    ctx.drawImage(image, (i % 3) * 200, Math.floor(i / 3) * 200, 200, 200);
  }
}

drawPage(currentPage); // 绘制第一页

document.getElementById('prev-page').addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPage(currentPage);
  }
});

document.getElementById('next-page').addEventListener('click', () => {
  if (currentPage < Math.ceil(images.length / PAGE_SIZE)) {
    currentPage++;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPage(currentPage);
  }
});

这段代码使用 Canvas 在页面上绘制图片，并提供上一页和下一页的功能，用于分页显示 PNG 文件。你需要在 HTML 中添加一个 `canvas` 元素和两个按钮，分别用于翻页：

<canvas id="canvas" width="600" height="600"></canvas>
<button id="prev-page">上一页</button>
<button id="next-page">下一页</button>

这样，当用户选择了本地文件夹中的所有 PNG 文件后，就可以在页面上分页显示这些文件了。