PDF to Images Converter<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f3f4f6;\r\n }\r\n\r\n .spinner {\r\n border: 4px solid rgba(0, 0, 0, 0.1);\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n border-left-color: #3b82f6; \/* Tailwind blue-500 *\/\r\n animation: spin 1s linear infinite;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen flex items-center justify-center p-4\">\r\n\r\n <div class=\"bg-white rounded-xl shadow-lg p-8 max-w-md w-full\">\r\n <div class=\"text-center mb-8\">\r\n <h1 class=\"text-2xl font-bold text-gray-800 mb-2\">PDF to Images<\/h1>\r\n <p class=\"text-gray-500 text-sm\">Convert your PDF files into individual images locally in your browser.<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-6\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\" for=\"pdf-file\">\r\n Select PDF File\r\n <\/label>\r\n <input type=\"file\" id=\"pdf-file\" accept=\".pdf\" \r\n class=\"block w-full text-sm text-gray-500\r\n file:mr-4 file:py-2 file:px-4\r\n file:rounded-md file:border-0\r\n file:text-sm file:font-semibold\r\n file:bg-blue-50 file:text-blue-700\r\n hover:file:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors cursor-pointer border border-gray-300 rounded-md p-2\">\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">\r\n Output Format\r\n <\/label>\r\n <div class=\"flex space-x-4\">\r\n <label class=\"inline-flex items-center cursor-pointer\">\r\n <input type=\"radio\" name=\"format\" value=\"png\" class=\"form-radio text-blue-600 focus:ring-blue-500 h-4 w-4\" checked>\r\n <span class=\"ml-2 text-gray-700\">PNG<\/span>\r\n <\/label>\r\n <label class=\"inline-flex items-center cursor-pointer\">\r\n <input type=\"radio\" name=\"format\" value=\"jpeg\" class=\"form-radio text-blue-600 focus:ring-blue-500 h-4 w-4\">\r\n <span class=\"ml-2 text-gray-700\">JPEG<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <button id=\"convert-btn\" \r\n class=\"w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\">\r\n Convert to Images\r\n <\/button>\r\n\r\n \r\n <div id=\"status-container\" class=\"hidden flex-col items-center justify-center space-y-3 mt-4\">\r\n <div class=\"spinner\"><\/div>\r\n <p id=\"status-text\" class=\"text-sm font-medium text-gray-600 text-center\">Preparing...<\/p>\r\n <\/div>\r\n \r\n <div id=\"success-message\" class=\"hidden text-center mt-4\">\r\n <p class=\"text-sm font-medium text-green-600\">\u2705 Conversion complete! Zip file downloading.<\/p>\r\n <\/div>\r\n <div id=\"error-message\" class=\"hidden text-center mt-4\">\r\n <p class=\"text-sm font-medium text-red-600\" id=\"error-text\">\u274c An error occurred.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <canvas id=\"pdf-canvas\" class=\"hidden\"><\/canvas>\r\n\r\n <script>\r\n \/\/ Configure PDF.js worker\r\n pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js';\r\n\r\n \/\/ DOM Elements\r\n const fileInput = document.getElementById('pdf-file');\r\n const convertBtn = document.getElementById('convert-btn');\r\n const formatRadios = document.getElementsByName('format');\r\n const statusContainer = document.getElementById('status-container');\r\n const statusText = document.getElementById('status-text');\r\n const successMessage = document.getElementById('success-message');\r\n const errorMessage = document.getElementById('error-message');\r\n const errorText = document.getElementById('error-text');\r\n const canvas = document.getElementById('pdf-canvas');\r\n const ctx = canvas.getContext('2d');\r\n\r\n \/\/ Utility to pad numbers (e.g., 1 -> \"01\", 12 -> \"12\")\r\n function padNumber(num, totalPages) {\r\n const numDigits = totalPages.toString().length;\r\n return num.toString().padStart(Math.max(2, numDigits), '0');\r\n }\r\n\r\n convertBtn.addEventListener('click', async () => {\r\n const file = fileInput.files[0];\r\n \r\n if (!file) {\r\n showError(\"Please select a PDF file first.\");\r\n return;\r\n }\r\n\r\n if (file.type !== 'application\/pdf') {\r\n showError(\"The selected file is not a valid PDF.\");\r\n return;\r\n }\r\n\r\n \/\/ Get selected format\r\n let selectedFormat = 'png';\r\n for (const radio of formatRadios) {\r\n if (radio.checked) {\r\n selectedFormat = radio.value;\r\n break;\r\n }\r\n }\r\n\r\n \/\/ UI State change: Disable inputs, show loader\r\n setUiState(true);\r\n hideMessages();\r\n\r\n try {\r\n updateStatus(\"Loading PDF document...\");\r\n \r\n \/\/ Read file as ArrayBuffer\r\n const arrayBuffer = await file.arrayBuffer();\r\n \r\n \/\/ Load PDF document\r\n const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;\r\n const numPages = pdf.numPages;\r\n \r\n \/\/ Initialize JSZip\r\n const zip = new JSZip();\r\n \r\n \/\/ Process pages sequentially to avoid memory issues with large PDFs\r\n for (let pageNum = 1; pageNum <= numPages; pageNum++) {\r\n updateStatus(`Converting page ${pageNum} of ${numPages}...`);\r\n \r\n const page = await pdf.getPage(pageNum);\r\n \r\n \/\/ Set scale for high quality rendering (e.g., 2.0 or 3.0)\r\n const scale = 2.0; \r\n const viewport = page.getViewport({ scale: scale });\r\n \r\n \/\/ Prepare canvas dimensions\r\n canvas.width = viewport.width;\r\n canvas.height = viewport.height;\r\n \r\n \/\/ Render page context\r\n const renderContext = {\r\n canvasContext: ctx,\r\n viewport: viewport\r\n };\r\n \r\n await page.render(renderContext).promise;\r\n \r\n \/\/ Convert canvas to Blob based on selected format\r\n const mimeType = selectedFormat === 'jpeg' ? 'image\/jpeg' : 'image\/png';\r\n \/\/ Quality is only applicable for jpeg (0 to 1)\r\n const quality = selectedFormat === 'jpeg' ? 0.9 : undefined; \r\n \r\n const blob = await new Promise(resolve => {\r\n canvas.toBlob(resolve, mimeType, quality);\r\n });\r\n \r\n if (!blob) throw new Error(`Failed to convert page ${pageNum} to image.`);\r\n\r\n \/\/ Add blob to zip\r\n const filename = `page_${padNumber(pageNum, numPages)}.${selectedFormat}`;\r\n zip.file(filename, blob);\r\n }\r\n\r\n updateStatus(\"Zipping images...\");\r\n \r\n \/\/ Generate ZIP file\r\n const zipContent = await zip.generateAsync({ type: \"blob\" });\r\n \r\n \/\/ Create download link\r\n const downloadUrl = URL.createObjectURL(zipContent);\r\n const originalFileName = file.name.replace(\/\\.[^\/.]+$\/, \"\"); \/\/ Remove .pdf\r\n \r\n const link = document.createElement('a');\r\n link.href = downloadUrl;\r\n link.download = `${originalFileName}_images.zip`;\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n \r\n \/\/ Cleanup\r\n URL.revokeObjectURL(downloadUrl);\r\n \r\n \/\/ Show success\r\n successMessage.classList.remove('hidden');\r\n\r\n } catch (error) {\r\n console.error(\"Conversion error:\", error);\r\n showError(\"An error occurred during conversion: \" + error.message);\r\n } finally {\r\n \/\/ Restore UI state\r\n setUiState(false);\r\n statusContainer.classList.add('hidden');\r\n }\r\n });\r\n\r\n function updateStatus(message) {\r\n statusContainer.classList.remove('hidden');\r\n statusText.textContent = message;\r\n }\r\n\r\n function setUiState(isProcessing) {\r\n fileInput.disabled = isProcessing;\r\n convertBtn.disabled = isProcessing;\r\n for (const radio of formatRadios) {\r\n radio.disabled = isProcessing;\r\n }\r\n if(isProcessing) {\r\n convertBtn.innerHTML = \"Processing...\";\r\n convertBtn.classList.replace('bg-blue-600', 'bg-gray-400');\r\n convertBtn.classList.replace('hover:bg-blue-700', 'hover:bg-gray-400');\r\n } else {\r\n convertBtn.innerHTML = \"Convert to Images\";\r\n convertBtn.classList.replace('bg-gray-400', 'bg-blue-600');\r\n convertBtn.classList.replace('hover:bg-gray-400', 'hover:bg-blue-700');\r\n }\r\n }\r\n\r\n function hideMessages() {\r\n successMessage.classList.add('hidden');\r\n errorMessage.classList.add('hidden');\r\n }\r\n\r\n function showError(msg) {\r\n errorText.textContent = `\u274c ${msg}`;\r\n errorMessage.classList.remove('hidden');\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PDF to Images Conver […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2186","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"akkaporn keumyarach","author_link":"https:\/\/banpan.ac.th\/?author=3"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"PDF to Images Conver […]","_links":{"self":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2186"}],"version-history":[{"count":4,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2186\/revisions"}],"predecessor-version":[{"id":2192,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2186\/revisions\/2192"}],"wp:attachment":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t $\"\"$ \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n PDF to Images Converter<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f3f4f6;\r\n }\r\n\r\n .spinner {\r\n border: 4px solid rgba(0, 0, 0, 0.1);\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n border-left-color: #3b82f6; \/* Tailwind blue-500 *\/\r\n animation: spin 1s linear infinite;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen flex items-center justify-center p-4\">\r\n\r\n <div class=\"bg-white rounded-xl shadow-lg p-8 max-w-md w-full\">\r\n <div class=\"text-center mb-8\">\r\n <h1 class=\"text-2xl font-bold text-gray-800 mb-2\">PDF to Images<\/h1>\r\n <p class=\"text-gray-500 text-sm\">Convert your PDF files into individual images locally in your browser.<\/p>\r\n <\/div>\r\n\r\n <div class=\"space-y-6\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\" for=\"pdf-file\">\r\n Select PDF File\r\n <\/label>\r\n <input type=\"file\" id=\"pdf-file\" accept=\".pdf\" \r\n class=\"block w-full text-sm text-gray-500\r\n file:mr-4 file:py-2 file:px-4\r\n file:rounded-md file:border-0\r\n file:text-sm file:font-semibold\r\n file:bg-blue-50 file:text-blue-700\r\n hover:file:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors cursor-pointer border border-gray-300 rounded-md p-2\">\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-2\">\r\n Output Format\r\n <\/label>\r\n <div class=\"flex space-x-4\">\r\n <label class=\"inline-flex items-center cursor-pointer\">\r\n <input type=\"radio\" name=\"format\" value=\"png\" class=\"form-radio text-blue-600 focus:ring-blue-500 h-4 w-4\" checked>\r\n <span class=\"ml-2 text-gray-700\">PNG<\/span>\r\n <\/label>\r\n <label class=\"inline-flex items-center cursor-pointer\">\r\n <input type=\"radio\" name=\"format\" value=\"jpeg\" class=\"form-radio text-blue-600 focus:ring-blue-500 h-4 w-4\">\r\n <span class=\"ml-2 text-gray-700\">JPEG<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <button id=\"convert-btn\" \r\n class=\"w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\">\r\n Convert to Images\r\n <\/button>\r\n\r\n \r\n <div id=\"status-container\" class=\"hidden flex-col items-center justify-center space-y-3 mt-4\">\r\n <div class=\"spinner\"><\/div>\r\n <p id=\"status-text\" class=\"text-sm font-medium text-gray-600 text-center\">Preparing...<\/p>\r\n <\/div>\r\n \r\n <div id=\"success-message\" class=\"hidden text-center mt-4\">\r\n <p class=\"text-sm font-medium text-green-600\">\u2705 Conversion complete! Zip file downloading.<\/p>\r\n <\/div>\r\n <div id=\"error-message\" class=\"hidden text-center mt-4\">\r\n <p class=\"text-sm font-medium text-red-600\" id=\"error-text\">\u274c An error occurred.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <canvas id=\"pdf-canvas\" class=\"hidden\"><\/canvas>\r\n\r\n <script>\r\n \/\/ Configure PDF.js worker\r\n pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js';\r\n\r\n \/\/ DOM Elements\r\n const fileInput = document.getElementById('pdf-file');\r\n const convertBtn = document.getElementById('convert-btn');\r\n const formatRadios = document.getElementsByName('format');\r\n const statusContainer = document.getElementById('status-container');\r\n const statusText = document.getElementById('status-text');\r\n const successMessage = document.getElementById('success-message');\r\n const errorMessage = document.getElementById('error-message');\r\n const errorText = document.getElementById('error-text');\r\n const canvas = document.getElementById('pdf-canvas');\r\n const ctx = canvas.getContext('2d');\r\n\r\n \/\/ Utility to pad numbers (e.g., 1 -> \"01\", 12 -> \"12\")\r\n function padNumber(num, totalPages) {\r\n const numDigits = totalPages.toString().length;\r\n return num.toString().padStart(Math.max(2, numDigits), '0');\r\n }\r\n\r\n convertBtn.addEventListener('click', async () => {\r\n const file = fileInput.files[0];\r\n \r\n if (!file) {\r\n showError(\"Please select a PDF file first.\");\r\n return;\r\n }\r\n\r\n if (file.type !== 'application\/pdf') {\r\n showError(\"The selected file is not a valid PDF.\");\r\n return;\r\n }\r\n\r\n \/\/ Get selected format\r\n let selectedFormat = 'png';\r\n for (const radio of formatRadios) {\r\n if (radio.checked) {\r\n selectedFormat = radio.value;\r\n break;\r\n }\r\n }\r\n\r\n \/\/ UI State change: Disable inputs, show loader\r\n setUiState(true);\r\n hideMessages();\r\n\r\n try {\r\n updateStatus(\"Loading PDF document...\");\r\n \r\n \/\/ Read file as ArrayBuffer\r\n const arrayBuffer = await file.arrayBuffer();\r\n \r\n \/\/ Load PDF document\r\n const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;\r\n const numPages = pdf.numPages;\r\n \r\n \/\/ Initialize JSZip\r\n const zip = new JSZip();\r\n \r\n \/\/ Process pages sequentially to avoid memory issues with large PDFs\r\n for (let pageNum = 1; pageNum <= numPages; pageNum++) {\r\n updateStatus(`Converting page ${pageNum} of ${numPages}...`);\r\n \r\n const page = await pdf.getPage(pageNum);\r\n \r\n \/\/ Set scale for high quality rendering (e.g., 2.0 or 3.0)\r\n const scale = 2.0; \r\n const viewport = page.getViewport({ scale: scale });\r\n \r\n \/\/ Prepare canvas dimensions\r\n canvas.width = viewport.width;\r\n canvas.height = viewport.height;\r\n \r\n \/\/ Render page context\r\n const renderContext = {\r\n canvasContext: ctx,\r\n viewport: viewport\r\n };\r\n \r\n await page.render(renderContext).promise;\r\n \r\n \/\/ Convert canvas to Blob based on selected format\r\n const mimeType = selectedFormat === 'jpeg' ? 'image\/jpeg' : 'image\/png';\r\n \/\/ Quality is only applicable for jpeg (0 to 1)\r\n const quality = selectedFormat === 'jpeg' ? 0.9 : undefined; \r\n \r\n const blob = await new Promise(resolve => {\r\n canvas.toBlob(resolve, mimeType, quality);\r\n });\r\n \r\n if (!blob) throw new Error(`Failed to convert page ${pageNum} to image.`);\r\n\r\n \/\/ Add blob to zip\r\n const filename = `page_${padNumber(pageNum, numPages)}.${selectedFormat}`;\r\n zip.file(filename, blob);\r\n }\r\n\r\n updateStatus(\"Zipping images...\");\r\n \r\n \/\/ Generate ZIP file\r\n const zipContent = await zip.generateAsync({ type: \"blob\" });\r\n \r\n \/\/ Create download link\r\n const downloadUrl = URL.createObjectURL(zipContent);\r\n const originalFileName = file.name.replace(\/\\.[^\/.]+$\/, \"\"); \/\/ Remove .pdf\r\n \r\n const link = document.createElement('a');\r\n link.href = downloadUrl;\r\n link.download = `${originalFileName}_images.zip`;\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n \r\n \/\/ Cleanup\r\n URL.revokeObjectURL(downloadUrl);\r\n \r\n \/\/ Show success\r\n successMessage.classList.remove('hidden');\r\n\r\n } catch (error) {\r\n console.error(\"Conversion error:\", error);\r\n showError(\"An error occurred during conversion: \" + error.message);\r\n } finally {\r\n \/\/ Restore UI state\r\n setUiState(false);\r\n statusContainer.classList.add('hidden');\r\n }\r\n });\r\n\r\n function updateStatus(message) {\r\n statusContainer.classList.remove('hidden');\r\n statusText.textContent = message;\r\n }\r\n\r\n function setUiState(isProcessing) {\r\n fileInput.disabled = isProcessing;\r\n convertBtn.disabled = isProcessing;\r\n for (const radio of formatRadios) {\r\n radio.disabled = isProcessing;\r\n }\r\n if(isProcessing) {\r\n convertBtn.innerHTML = \"Processing...\";\r\n convertBtn.classList.replace('bg-blue-600', 'bg-gray-400');\r\n convertBtn.classList.replace('hover:bg-blue-700', 'hover:bg-gray-400');\r\n } else {\r\n convertBtn.innerHTML = \"Convert to Images\";\r\n convertBtn.classList.replace('bg-gray-400', 'bg-blue-600');\r\n convertBtn.classList.replace('hover:bg-gray-400', 'hover:bg-blue-700');\r\n }\r\n }\r\n\r\n function hideMessages() {\r\n successMessage.classList.add('hidden');\r\n errorMessage.classList.add('hidden');\r\n }\r\n\r\n function showError(msg) {\r\n errorText.textContent = `\u274c ${msg}`;\r\n errorMessage.classList.remove('hidden');\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PDF to Images Conver […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2186","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"akkaporn keumyarach","author_link":"https:\/\/banpan.ac.th\/?author=3"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"PDF to Images Conver […]","_links":{"self":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2186"}],"version-history":[{"count":4,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2186\/revisions"}],"predecessor-version":[{"id":2192,"href":"https:\/\/banpan.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/2186\/revisions\/2192"}],"wp:attachment":[{"href":"https:\/\/banpan.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}