<!DOCTYPE html><htmllang="zh-CN"><head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>PDF转图片 - 300 PPI</title> <!-- 引入 PDF.js 核心库和渲染器 --> <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script> <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; background: #f0f0f0; } .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } input, button { padding: 8px 16px; margin: 10px 5px; font-size: 14px; } .preview-area { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; } .page-container { border: 1px solid #ccc; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .page-container img { display: block; max-width: 100%; height: auto; } .page-container p { margin: 5px; text-align: center; font-size: 12px; background: #eee; } .info { margin-top: 15px; padding: 10px; background: #e9ecef; border-radius: 4px; font-size: 14px; } .error { color: red; } </style></head><body><divclass="container"> <h2>📄 PDF 转图片（300 PPI 渲染）</h2> <inputtype="file"id="pdfInput"accept="application/pdf" /> <buttonid="convertBtn">开始转换（300 PPI）</button> <divclass="info"> ⚡ 说明：基于 PDF.js 渲染，<strong>300 PPI</strong> 表示每英寸 300 像素，根据 PDF 页面尺寸（英寸 = 点/72）自动计算图片宽高。<br> ✅ 生成的图片为 PNG 格式，可直接右键保存。 </div> <divid="preview"class="preview-area"></div> <divid="status"class="info"style="display:none;"></div></div><script> // 设置 PDF.js worker pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js'; // 辅助函数：将 PDF 页面渲染为图片（指定 PPI） async function renderPageToImage(page, ppi = 300) { // 获取页面原始尺寸（单位：点，1 点 = 1/72 英寸） const viewportOriginal = page.getViewport({ scale: 1.0 }); const widthInPoints = viewportOriginal.width; // 宽度（点） const heightInPoints = viewportOriginal.height; // 高度（点） // 计算英寸：点 / 72 = 英寸 const widthInInches = widthInPoints / 72; const heightInInches = heightInPoints / 72; // 根据目标 PPI 计算所需像素尺寸 const widthInPixels = Math.round(widthInInches * ppi); const heightInPixels = Math.round(heightInInches * ppi); // 计算缩放比例：目标像素宽度 / 原始点宽度 const scale = widthInPixels / widthInPoints; // 获取按比例缩放后的视口 const viewport = page.getViewport({ scale: scale }); // 创建 canvas 元素 const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = viewport.width; canvas.height = viewport.height; // 渲染 PDF 页面到 canvas const renderContext = { canvasContext: context, viewport: viewport, background: 'white' // 白色背景 }; await page.render(renderContext).promise; // 将 canvas 转换为图片数据 URL（PNG 格式） const imageDataURL = canvas.toDataURL('image/png'); return { imageUrl: imageDataURL, width: canvas.width, height: canvas.height, ppi: ppi, sizeInches: { width: widthInInches.toFixed(2), height: heightInInches.toFixed(2) } }; } // 主函数：加载 PDF 并转换所有页面 async function convertPDFToImages(file, targetPPI = 300) { const statusDiv = document.getElementById('status'); const previewDiv = document.getElementById('preview'); statusDiv.style.display = 'block'; statusDiv.innerHTML = '📖 正在加载 PDF 文件...'; previewDiv.innerHTML = ''; // 清空之前的内容 try { // 读取文件为 ArrayBuffer const arrayBuffer = await file.arrayBuffer(); // 加载 PDF 文档 const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer }); const pdfDocument = await loadingTask.promise; const totalPages = pdfDocument.numPages; statusDiv.innerHTML = `📄 PDF 共 ${totalPages} 页，正在以 ${targetPPI} PPI 渲染...`; // 循环处理每一页 for (let pageNum = 1; pageNum <= totalPages; pageNum++) { statusDiv.innerHTML = `🎨 正在渲染第 ${pageNum} / ${totalPages} 页...`; // 获取页面 const page = await pdfDocument.getPage(pageNum); // 渲染为图片 const result = await renderPageToImage(page, targetPPI); // 创建页面容器 const pageContainer = document.createElement('div'); pageContainer.className = 'page-container'; pageContainer.style.marginBottom = '20px'; // 创建图片元素 const img = document.createElement('img'); img.src = result.imageUrl; img.alt = `第 ${pageNum} 页`; img.style.maxWidth = '100%'; img.style.height = 'auto'; img.style.border = '1px solid #ddd'; // 添加信息文字 const info = document.createElement('p'); info.textContent = `第 ${pageNum} 页 | ${result.width} x ${result.height} 像素 | ${result.ppi} PPI | 实际尺寸: ${result.sizeInches.width}" x ${result.sizeInches.height}"`; pageContainer.appendChild(img); pageContainer.appendChild(info); previewDiv.appendChild(pageContainer); } statusDiv.innerHTML = `✅ 转换完成！共 ${totalPages} 页，图片分辨率基于 ${targetPPI} PPI 生成。右键点击图片可保存。`; } catch (error) { console.error('转换出错:', error); statusDiv.innerHTML = `<span class="error">❌ 转换失败: ${error.message}</span>`; } } // 绑定按钮事件 document.getElementById('convertBtn').addEventListener('click', () => { const fileInput = document.getElementById('pdfInput'); const file = fileInput.files[0]; if (!file) { alert('请先选择一个 PDF 文件'); return; } // 固定使用 300 PPI convertPDFToImages(file, 300); });</script></body></html>
夜雨聆风
