PDF→画像変換【無料�Eオンライン】PNG/JPG一括変換チE�Eル | インスト�Eル不要E/title> <meta name="description" content="【完�E無料】PDFの吁E�EージをPNG・JPG画像に変換。高画質・サイズ調整・一括ダウンロード対応。データ保存なし�E完�Eローカル処琁E��安忁E��登録不要�Eインスト�Eル不要、E> <meta name="keywords" content="PDF 画像変換,PDF PNG変換,PDF JPG変換,PDF 画像化,無斁Eオンライン,インスト�Eル不要Eサイズ調整"> <link rel="canonical" href="https://tools.asoventure.jp/pdf2image/"> <meta property="og:title" content="PDF→画像変換【無料】PNG/JPG一括変換チE�Eル"> <meta property="og:description" content="PDFの吁E�EージをPNG・JPG画像に一括変換。サイズ調整可能。完�E無料�Eブラウザ完結�E登録不要、E> <meta property="og:type" content="website"> <meta property="og:url" content="https://tools.asoventure.jp/pdf2image/"> <meta property="og:image" content="https://tools.asoventure.jp/shared/og-image.png"> <meta property="og:site_name" content="アソベンチャー Tools"> <meta property="og:locale" content="ja_JP"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="PDF→画像変換【無料】PNG/JPG一括変換チE�Eル"> <meta name="twitter:description" content="PDFの吁E�EージをPNG・JPG画像に変換。完�E無料�E登録不要、E> <meta name="twitter:image" content="https://tools.asoventure.jp/shared/og-image.png"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebApplication", "name": "PDF→画像変換チE�Eル", "description": "PDFファイルの吁E�EージをPNG・JPG画像に変換する無料オンラインチE�Eル", "url": "https://tools.asoventure.jp/pdf2image/", "applicationCategory": "UtilityApplication", "operatingSystem": "All", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "JPY" } } </script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/shared/style.css">  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3042322878397404" crossorigin="anonymous"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> <style> .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; } .settings-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-top: 1rem; } @media (max-width: 600px) { .settings-grid, .settings-grid-3 { grid-template-columns: 1fr; } } .format-selector { display: flex; gap: 0.5rem; } .format-btn { flex: 1; padding: 0.6rem 1rem; border: 2px solid var(--border, #e0e0e0); border-radius: 8px; background: var(--bg-card, #fff); color: var(--text, #333); cursor: pointer; text-align: center; font-weight: 600; font-size: 0.9rem; transition: all 0.2s; } .format-btn:hover { border-color: var(--primary, #6366f1); } .format-btn.active { border-color: var(--primary, #6366f1); background: var(--primary, #6366f1); color: #fff; } .quality-selector { display: flex; gap: 0.5rem; } .quality-btn { flex: 1; padding: 0.6rem 0.5rem; border: 2px solid var(--border, #e0e0e0); border-radius: 8px; background: var(--bg-card, #fff); color: var(--text, #333); cursor: pointer; text-align: center; font-size: 0.8rem; font-weight: 500; transition: all 0.2s; } .quality-btn:hover { border-color: var(--primary, #6366f1); } .quality-btn.active { border-color: var(--primary, #6366f1); background: var(--primary, #6366f1); color: #fff; } .size-mode-selector { display: flex; gap: 0.5rem; } .size-mode-btn { flex: 1; padding: 0.5rem 0.5rem; border: 2px solid var(--border, #e0e0e0); border-radius: 8px; background: var(--bg-card, #fff); color: var(--text, #333); cursor: pointer; text-align: center; font-size: 0.78rem; font-weight: 500; transition: all 0.2s; } .size-mode-btn:hover { border-color: var(--primary, #6366f1); } .size-mode-btn.active { border-color: var(--primary, #6366f1); background: var(--primary, #6366f1); color: #fff; } .size-input-group { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .size-input-group input { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border, #e0e0e0); border-radius: 8px; background: var(--bg, #fafafa); color: var(--text, #333); font-size: 0.9rem; text-align: center; } .size-input-group span { font-size: 0.85rem; color: var(--text-muted, #999); white-space: nowrap; } .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: 1rem; } .preview-item { border: 1px solid var(--border, #e0e0e0); border-radius: 10px; overflow: hidden; background: var(--bg-card, #fff); transition: transform 0.2s, box-shadow 0.2s; } .preview-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .preview-item img { width: 100%; height: auto; display: block; background: #f8f8f8; } .preview-item-info { padding: 0.5rem 0.7rem; font-size: 0.75rem; } .preview-item-top { display: flex; justify-content: space-between; align-items: center; } .preview-item-label { font-weight: 600; color: var(--text, #333); } .preview-item-download { color: var(--primary, #6366f1); text-decoration: none; font-weight: 600; cursor: pointer; } .preview-item-download:hover { text-decoration: underline; } .preview-item-meta { color: var(--text-muted, #999); font-size: 0.7rem; margin-top: 0.2rem; } .progress-bar-container { width: 100%; background: var(--border, #e0e0e0); border-radius: 8px; overflow: hidden; height: 8px; margin-top: 1rem; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary, #6366f1), #818cf8); border-radius: 8px; transition: width 0.3s; width: 0%; } .progress-text { text-align: center; font-size: 0.85rem; color: var(--text-muted, #999); margin-top: 0.5rem; } .total-size-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem; background: var(--bg, #fafafa); border: 1px solid var(--border, #e0e0e0); border-radius: 10px; margin-top: 1rem; font-size: 0.85rem; } .total-size-label { color: var(--text-muted, #999); } .total-size-value { font-weight: 700; color: var(--text, #333); } .total-size-value.warning { color: #ef4444; } .btn-group { display: flex; gap: 0.75rem; margin-top: 1.5rem; } .btn-group .btn { flex: 1; } @media (max-width: 500px) { .btn-group { flex-direction: column; } } .result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem; } </style> </head> <body> <header class="header"> <div class="header-inner"> <a href="/" class="logo"> <div class="logo-icon">A</div> <div class="logo-text"><span>アソベンチャー Tools</span></div> </a> <nav class="nav-links"> <a href="/">チE�Eル一覧</a> <a href="https://cheese.asoventure.jp">Cheese</a> </nav> </div> </header> <div class="tool-page"> <div class="ad-space"><span class="ad-space-label">Advertisement</span></div> <div class="tool-container"> <div class="tool-header"> <div class="tool-header-icon file">🖼�E�E/div> <h1 class="tool-page-title">PDF→画像変換</h1> <p class="tool-page-desc">PDFの吁E�EージをPNG・JPG画像に高画質変換</p> <div class="privacy-badge"> <span class="privacy-badge-icon">🛡�E�E/span> <span>チE�Eタ保存なし�E完�Eローカル処琁E/span> </div> </div>  <div class="drop-zone" id="drop-zone" onclick="document.getElementById('file-input').click()"> <input type="file" id="file-input" accept=".pdf" hidden onchange="loadPDF(this.files[0])"> <div class="drop-zone-text">📁 クリチE��また�EドラチE��&ドロチE�EでPDFを選抁E/div> </div>  <div id="settings-area" style="display:none;margin-top:1.5rem;"> <div class="result-area"> <div style="text-align:center;"> <div class="result-item-label">読み込んだPDF</div> <div class="result-item-value" id="page-count">--ペ�Eジ</div> <div style="font-size:0.8rem;color:var(--text-muted,#999);margin-top:0.3rem;" id="pdf-original-size"></div> </div> </div>  <div class="settings-grid"> <div class="form-group"> <label>出力形弁E/label> <div class="format-selector"> <button class="format-btn active" data-format="png" onclick="setFormat('png')">PNG</button> <button class="format-btn" data-format="jpeg" onclick="setFormat('jpeg')">JPG</button> </div> </div> <div class="form-group"> <label>画質�E�EPI�E�E/label> <div class="quality-selector"> <button class="quality-btn" data-dpi="1" onclick="setQuality(1)">佁Ebr><small>72dpi</small></button> <button class="quality-btn active" data-dpi="2" onclick="setQuality(2)">中<br><small>144dpi</small></button> <button class="quality-btn" data-dpi="3" onclick="setQuality(3)">髁Ebr><small>216dpi</small></button> </div> </div> </div>  <div class="form-group" style="margin-top:1rem;"> <label>出力サイズ</label> <div class="size-mode-selector"> <button class="size-mode-btn active" data-mode="original" onclick="setSizeMode('original')">允E�Eサイズ</button> <button class="size-mode-btn" data-mode="width" onclick="setSizeMode('width')">幁E��持E��E/button> <button class="size-mode-btn" data-mode="percent" onclick="setSizeMode('percent')">%で持E��E/button> <button class="size-mode-btn" data-mode="maxsize" onclick="setSizeMode('maxsize')">容量制陁E/button> </div> <div id="size-width-input" class="size-input-group" style="display:none;"> <span>幁E/span> <input type="number" id="target-width" value="1920" min="100" max="10000" step="10"> <span>px</span> <p style="font-size:0.75rem;color:var(--text-muted,#999);margin-top:0;">高さは自動調整</p> </div> <div id="size-percent-input" class="size-input-group" style="display:none;"> <input type="number" id="target-percent" value="50" min="10" max="200" step="5"> <span>%</span> </div> <div id="size-maxsize-input" style="display:none;margin-top:0.5rem;"> <div class="size-input-group"> <span>1ファイルあたり上限</span> <input type="number" id="max-file-size" value="5" min="0.1" max="100" step="0.1"> <span>MB</span> </div> <p style="font-size:0.75rem;color:var(--text-muted,#999);margin-top:0.3rem;"> ※JPG形式�Eみ。趁E��時�E自動で画質を下げて調整しまぁE </p> </div> </div>  <div id="jpeg-quality-slider" style="display:none;" class="form-group"> <label>JPG画質: <span id="jpeg-quality-value">90</span>%</label> <input type="range" min="10" max="100" value="90" id="jpeg-quality" oninput="document.getElementById('jpeg-quality-value').textContent=this.value" style="width:100%;"> </div>  <div class="form-group" style="margin-top:1rem;"> <label>変換するペ�Eジ�E�侁E 1,3,5-8�E�E/label> <input type="text" id="page-range" placeholder="空欁E��全ペ�Eジを変換" style="width:100%;padding:0.6rem 0.8rem;border:1px solid var(--border,#e0e0e0);border-radius:8px;background:var(--bg,#fafafa);color:var(--text,#333);font-size:0.9rem;"> <p style="font-size:0.8rem;color:var(--text-muted,#999);margin-top:0.5rem;"> 空欁E 全ペ�Eジを画像に変換 �E�E侁E 1,3,5 ↁE持E��Eージのみ �E�E侁E 1-5 ↁE篁E��持E��E </p> </div> <div class="btn-group"> <button class="btn btn-primary btn-full" onclick="convertPages()">🖼�E�E画像に変換</button> </div> </div>  <div id="progress-area" style="display:none;"> <div class="progress-bar-container"> <div class="progress-bar" id="progress-bar"></div> </div> <div class="progress-text" id="progress-text">変換中... 0%</div> </div>  <div id="result-area" style="display:none;margin-top:1.5rem;"> <div class="result-header"> <div class="result-item-label">変換結果</div> <button class="btn btn-primary" id="download-all-btn" onclick="downloadAll()" style="font-size:0.85rem;padding:0.5rem 1rem;"> 📦 一括ダウンロード！EIP�E�E </button> </div> <div class="total-size-bar"> <span class="total-size-label">合計ファイルサイズ</span> <span class="total-size-value" id="total-size-value">--</span> </div> <div class="preview-grid" id="preview-grid"></div> </div>  <div class="how-to-section"> <h2 class="how-to-title">📖 使ぁE��</h2> <div class="how-to-steps"> <div class="how-to-step"> <div class="step-number">1</div> <div class="step-content"> <h4>PDFをアチE�EローチE/h4> <p>変換したいPDFファイルを選抁E/p> </div> </div> <div class="how-to-step"> <div class="step-number">2</div> <div class="step-content"> <h4>設定を選抁E/h4> <p>形式！ENG/JPG�E�、画質、サイズ、�Eージ篁E��を設宁E/p> </div> </div> <div class="how-to-step"> <div class="step-number">3</div> <div class="step-content"> <h4>ダウンローチE/h4> <p>個別また�EZIPで一括ダウンローチE/p> </div> </div> </div> </div>  <div class="faq-section"> <h2 class="faq-title">❁Eよくある質啁E/h2> <div class="faq-item"> <button class="faq-question" onclick="this.parentElement.classList.toggle('open')">どのくらぁE�Eペ�Eジ数まで変換できますか�E�E/button> <div class="faq-answer"> <p>ブラウザのメモリ制限により、E0、E00ペ�Eジ程度が目安です。高画質設定ではメモリ使用量が増えるため、�Eージ数が多い場合�E「低」画質の使用をおすすめします、E/p> </div> </div> <div class="faq-item"> <button class="faq-question" onclick="this.parentElement.classList.toggle('open')">チE�Eタはサーバ�Eに送信されますか�E�E/button> <div class="faq-answer"> <p>ぁE��え、すべての処琁E�Eブラウザ上で行われます。完�Eにローカルで処琁E��れるため、機寁E��書も安忁E��てご利用ぁE��だけます、E/p> </div> </div> <div class="faq-item"> <button class="faq-question" onclick="this.parentElement.classList.toggle('open')">PNGとJPGの違いは�E�E/button> <div class="faq-answer"> <p>PNGは透過・高画質で斁E��・図表向き、JPGはファイルサイズが小さく�E真�EWeb掲載向きです、E/p> </div> </div> <div class="faq-item"> <button class="faq-question" onclick="this.parentElement.classList.toggle('open')">ファイルサイズを小さくするには�E�E/button> <div class="faq-answer"> <p>JPG形式にして画質を下げる、DPIを「低」にする、「容量制限」モードで上限を設定する、などの方法が効果的です、E/p> </div> </div> </div> </div> <div class="ad-space"><span class="ad-space-label">Advertisement</span></div>  <section class="related-section"> <h3 class="related-title">関連PDFチE�Eル</h3> <div class="related-grid"> <a href="/pdf-split/" class="related-card"> <div class="related-card-icon file">✂︁E/div> <div class="related-card-content"> <div class="related-card-name">PDF刁E��</div> <div class="related-card-desc">ペ�Eジごとに刁E��・抽出</div> </div> </a> <a href="/pdf-merge/" class="related-card"> <div class="related-card-icon file">📑</div> <div class="related-card-content"> <div class="related-card-name">PDF結合</div> <div class="related-card-desc">褁E��PDFめEつにまとめる</div> </div> </a> <a href="/pdf-compress/" class="related-card"> <div class="related-card-icon file">📄</div> <div class="related-card-content"> <div class="related-card-name">PDF圧縮</div> <div class="related-card-desc">ファイルサイズを削渁E/div> </div> </a> <a href="/pdf2word/" class="related-card"> <div class="related-card-icon file">📝</div> <div class="related-card-content"> <div class="related-card-name">PDF→Word変換</div> <div class="related-card-desc">チE��ストを抽出・編雁E/div> </div> </a> <a href="/image2pdf/" class="related-card"> <div class="related-card-icon file">🖼�E�E/div> <div class="related-card-content"> <div class="related-card-name">画像�EPDF変換</div> <div class="related-card-desc">画像をPDFにまとめる</div> </div> </a> </div> </section> </div>  <div style="max-width: 700px; margin: 2rem auto; padding: 0 1rem;"> <a href="https://forms.gle/Vw1PBQefXRLvTw459" target="_blank" style="display: block; background: linear-gradient(135deg, #7C3AED, #6366F1); border-radius: 16px; padding: 1.5rem; text-decoration: none; text-align: center; box-shadow: 0 8px 24px rgba(124,58,237,0.25);"> <div style="color: #E9D5FF; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.3rem;"> バイブコーチE��ング代衁E/div> <div style="color: #fff; font-size: 1.1rem; font-weight: 800; margin-bottom: 0.3rem;">こんなチE�Eル、あなた専用に作れまぁE </div> <div style="color: rgba(255,255,255,0.7); font-size: 0.8rem;">80種以上�E開発実績無料で相諁E��めE/div> </a> </div> <footer class="footer"> <div class="footer-inner"> <div class="footer-brand">アソベンチャー Tools</div> <div class="footer-tagline">冒険をサポ�Eトする道具箱</div> <div class="footer-links"> <a href="/">チE�Eル一覧</a> <a href="https://cheese.asoventure.jp">Cheese</a> <a href="https://asoventure.jp">Asoventure</a> </div> <div class="footer-links" style="margin-top:0.25rem;"><a href="https://asoventure.jp"> Asoventure</a><a href="https://biz.asoventure.jp"> Biz</a><a href="https://diagnosis.asoventure.jp"> Diagnosis</a><a href="https://station.asoventure.jp"> Station</a><a href="https://play.asoventure.jp"> Play</a> </div> <div class="footer-copy">© 2024 Futuristic Imagination Co.,Ltd.</div> </div> </footer> <script> // PDF.js worker pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; let pdfDocument = null; let pdfFileName = ''; let outputFormat = 'png'; let scaleFactor = 2; let sizeMode = 'original'; // original, width, percent, maxsize let convertedImages = []; // Drag & Drop const dropZone = document.getElementById('drop-zone'); dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); }); dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over')); dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('drag-over'); loadPDF(e.dataTransfer.files[0]); }); function setFormat(format) { outputFormat = format; document.querySelectorAll('.format-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.format === format); }); document.getElementById('jpeg-quality-slider').style.display = format === 'jpeg' ? 'block' : 'none'; // maxsize only works with JPEG if (sizeMode === 'maxsize' && format !== 'jpeg') { setSizeMode('original'); } } function setQuality(dpi) { scaleFactor = dpi; document.querySelectorAll('.quality-btn').forEach(btn => { btn.classList.toggle('active', parseInt(btn.dataset.dpi) === dpi); }); } function setSizeMode(mode) { sizeMode = mode; document.querySelectorAll('.size-mode-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.mode === mode); }); document.getElementById('size-width-input').style.display = mode === 'width' ? 'flex' : 'none'; document.getElementById('size-percent-input').style.display = mode === 'percent' ? 'flex' : 'none'; document.getElementById('size-maxsize-input').style.display = mode === 'maxsize' ? 'block' : 'none'; // maxsize requires JPEG if (mode === 'maxsize' && outputFormat !== 'jpeg') { setFormat('jpeg'); } } function formatFileSize(bytes) { if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'; return (bytes / (1024 * 1024)).toFixed(2) + ' MB'; } async function loadPDF(file) { if (!file) return; if (file.type !== 'application/pdf') { alert('PDFファイルを選択してください、E); return; } try { const arrayBuffer = await file.arrayBuffer(); pdfDocument = await pdfjsLib.getDocument({ data: arrayBuffer }).promise; pdfFileName = file.name.replace(/\.pdf$/i, ''); document.getElementById('page-count').textContent = pdfDocument.numPages + 'ペ�Eジ'; document.getElementById('pdf-original-size').textContent = 'ファイルサイズ: ' + formatFileSize(file.size); document.getElementById('settings-area').style.display = 'block'; document.getElementById('result-area').style.display = 'none'; document.getElementById('progress-area').style.display = 'none'; document.getElementById('preview-grid').innerHTML = ''; convertedImages = []; dropZone.querySelector('.drop-zone-text').textContent = '📄 ' + file.name; } catch (e) { alert('PDFの読み込みに失敗しました: ' + e.message); } } function parsePageRange(input, maxPage) { if (!input.trim()) { return Array.from({ length: maxPage }, (_, i) => i + 1); } const pages = []; const parts = input.split(','); for (const part of parts) { if (part.includes('-')) { const [start, end] = part.split('-').map(s => parseInt(s.trim())); for (let i = start; i <= end; i++) { if (i >= 1 && i <= maxPage) pages.push(i); } } else { const page = parseInt(part.trim()); if (page >= 1 && page <= maxPage) pages.push(page); } } return [...new Set(pages)].sort((a, b) => a - b); } async function renderPageToCanvas(pageNum, customScale) { const page = await pdfDocument.getPage(pageNum); const baseViewport = page.getViewport({ scale: customScale || scaleFactor }); let finalWidth = baseViewport.width; let finalHeight = baseViewport.height; if (sizeMode === 'width') { const targetW = parseInt(document.getElementById('target-width').value) || 1920; const ratio = targetW / baseViewport.width; finalWidth = targetW; finalHeight = Math.round(baseViewport.height * ratio); } else if (sizeMode === 'percent') { const pct = (parseInt(document.getElementById('target-percent').value) || 100) / 100; finalWidth = Math.round(baseViewport.width * pct); finalHeight = Math.round(baseViewport.height * pct); } // Re-create viewport at the exact needed size const renderScale = finalWidth / page.getViewport({ scale: 1 }).width; const viewport = page.getViewport({ scale: renderScale }); const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; const ctx = canvas.getContext('2d'); if (outputFormat === 'jpeg') { ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); } await page.render({ canvasContext: ctx, viewport }).promise; return canvas; } async function canvasToBlob(canvas, quality) { const mimeType = outputFormat === 'jpeg' ? 'image/jpeg' : 'image/png'; const q = outputFormat === 'jpeg' ? quality : undefined; return new Promise(resolve => { canvas.toBlob(blob => resolve(blob), mimeType, q); }); } async function convertWithMaxSize(pageNum, maxBytes) { // Try decreasing quality until file size is within limit let quality = parseInt(document.getElementById('jpeg-quality').value) / 100; let canvas = await renderPageToCanvas(pageNum); let blob = await canvasToBlob(canvas, quality); // If already within limit, return if (blob.size <= maxBytes) { return { blob, canvas, quality }; } // Try reducing quality const qualitySteps = [0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1]; for (const q of qualitySteps) { if (q >= quality) continue; blob = await canvasToBlob(canvas, q); if (blob.size <= maxBytes) { return { blob, canvas, quality: q }; } } // If still too large, scale down the image const scales = [0.75, 0.5, 0.4, 0.3, 0.25, 0.2]; for (const s of scales) { canvas = await renderPageToCanvas(pageNum, scaleFactor * s); blob = await canvasToBlob(canvas, 0.1); if (blob.size <= maxBytes) { return { blob, canvas, quality: 0.1 }; } } // Return the smallest we could get return { blob, canvas, quality: 0.1 }; } async function convertPages() { if (!pdfDocument) return; const pageRange = document.getElementById('page-range').value; const pages = parsePageRange(pageRange, pdfDocument.numPages); if (pages.length === 0) { alert('有効なペ�Eジを指定してください、E); return; } document.getElementById('progress-area').style.display = 'block'; document.getElementById('result-area').style.display = 'none'; const progressBar = document.getElementById('progress-bar'); const progressText = document.getElementById('progress-text'); const previewGrid = document.getElementById('preview-grid'); previewGrid.innerHTML = ''; convertedImages = []; const jpegQuality = parseInt(document.getElementById('jpeg-quality').value) / 100; const ext = outputFormat === 'jpeg' ? 'jpg' : 'png'; let totalSize = 0; for (let i = 0; i < pages.length; i++) { const pageNum = pages[i]; const progress = Math.round((i / pages.length) * 100); progressBar.style.width = progress + '%'; progressText.textContent = `変換中... ${pageNum}ペ�Eジ目 (${i + 1}/${pages.length})`; try { let blob, canvas; if (sizeMode === 'maxsize' && outputFormat === 'jpeg') { const maxMB = parseFloat(document.getElementById('max-file-size').value) || 5; const maxBytes = maxMB * 1024 * 1024; const result = await convertWithMaxSize(pageNum, maxBytes); blob = result.blob; canvas = result.canvas; } else { canvas = await renderPageToCanvas(pageNum); blob = await canvasToBlob(canvas, jpegQuality); } const dataUrl = URL.createObjectURL(blob); const filename = `${pdfFileName}_page${pageNum}.${ext}`; convertedImages.push({ blob, dataUrl, filename, pageNum, size: blob.size, width: canvas.width, height: canvas.height }); totalSize += blob.size; // Create preview const thumbCanvas = document.createElement('canvas'); const thumbCtx = thumbCanvas.getContext('2d'); const thumbW = 360; const thumbH = Math.round((canvas.height / canvas.width) * thumbW); thumbCanvas.width = thumbW; thumbCanvas.height = thumbH; thumbCtx.drawImage(canvas, 0, 0, thumbW, thumbH); const thumbUrl = thumbCanvas.toDataURL('image/jpeg', 0.7); const item = document.createElement('div'); item.className = 'preview-item'; item.innerHTML = ` <img src="${thumbUrl}" alt="ペ�Eジ${pageNum}" loading="lazy"> <div class="preview-item-info"> <div class="preview-item-top"> <span class="preview-item-label">ペ�Eジ ${pageNum}</span> <a class="preview-item-download" onclick="downloadSingle(${i})">💾 保孁E/a> </div> <div class="preview-item-meta">${canvas.width}ÁE{canvas.height}px ・ ${formatFileSize(blob.size)}</div> </div> `; previewGrid.appendChild(item); await new Promise(r => setTimeout(r, 30)); } catch (e) { console.error(`Page ${pageNum} failed:`, e); } } // Complete progressBar.style.width = '100%'; progressText.textContent = `変換完亁E��E${pages.length}ペ�Eジ`; document.getElementById('result-area').style.display = 'block'; // Show total size const totalSizeEl = document.getElementById('total-size-value'); totalSizeEl.textContent = formatFileSize(totalSize); totalSizeEl.classList.toggle('warning', totalSize > 50 * 1024 * 1024); setTimeout(() => { document.getElementById('progress-area').style.display = 'none'; }, 1500); } function downloadSingle(index) { const img = convertedImages[index]; const link = document.createElement('a'); link.href = img.dataUrl; link.download = img.filename; link.click(); } async function downloadAll() { if (convertedImages.length === 0) return; const btn = document.getElementById('download-all-btn'); btn.textContent = '📦 ZIP作�E中...'; btn.disabled = true; try { const zip = new JSZip(); for (const img of convertedImages) { zip.file(img.filename, img.blob); } const zipBlob = await zip.generateAsync({ type: 'blob', compression: 'DEFLATE', compressionOptions: { level: 6 } }); const url = URL.createObjectURL(zipBlob); const link = document.createElement('a'); link.href = url; link.download = pdfFileName + '_images.zip'; link.click(); setTimeout(() => URL.revokeObjectURL(url), 5000); } catch (e) { alert('ZIPの作�Eに失敗しました: ' + e.message); } btn.textContent = '📦 一括ダウンロード！EIP�E�E; btn.disabled = false; } </script> </body> </html>