pdf2img 

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>PDF 转图片数组 Demo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    input[type="file"] {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>

  <h2>上传 PDF 文件，转换为图片数组</h2>
  <input type="file" id="pdfInput" accept="application/pdf" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.min.js"></script>
  <script>
    // 设置 worker 路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.worker.min.js';

    // 处理文件上传
    document.getElementById('pdfInput').addEventListener('change', async function (event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();

      reader.onload = async function () {
        const typedArray = new Uint8Array(reader.result);

        try {
          // 加载 PDF
          const pdf = await pdfjsLib.getDocument({ data: typedArray }).promise;

          const imagePromises = [];

          // 遍历每一页
          for (let i = 1; i <= pdf.numPages; i++) {
            const page = await pdf.getPage(i);

            // 设置视口（可调整 scale 提高清晰度）
            const viewport = page.getViewport({ scale: 1.5 });

            // 创建 canvas
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // 渲染 PDF 页面到 canvas
            await page.render({
              canvasContext: context,
              viewport: viewport
            }).promise;

            // 转换为图片 Data URL
            const imageDataUrl = canvas.toDataURL('image/png');

            // 将图片数据存入数组
            imagePromises.push(imageDataUrl);
          }

          // 等待所有图片处理完成
          const imageArray = await Promise.all(imagePromises);

          // 打印到控制台
          console.log('转换后的图片数组:', imageArray);

          // 可选：显示图片
          imageArray.forEach((imgUrl) => {
            const img = document.createElement('img');
            img.src = imgUrl;
            img.style.maxWidth = '100%';
            img.style.marginBottom = '10px';
            document.body.appendChild(img);
          });

        } catch (error) {
          console.error('PDF 转换失败:', error);
        }
      };

      reader.onerror = function () {
        console.error('文件读取失败:', reader.error);
      };

      reader.readAsArrayBuffer(file);
    });
  </script>
</body>
</html>
posted @ 2025-04-29 20:22  _clai  阅读(11)  评论(0)    收藏  举报