feat(pdf-to-webp): direct download resulting image and adjust filename

src/js/logic/pdf-to-webp.ts

@@ -3,6 +3,7 @@ import { downloadFile, readFileAsArrayBuffer, getPDFDocument } from '../utils/he
 import { state } from '../state.js';
 import JSZip from 'jszip';
 import * as pdfjsLib from 'pdfjs-dist';
+import { PDFPageProxy } from 'pdfjs-dist';
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
 
@@ -13,25 +14,21 @@ export async function pdfToWebp() {
     const pdf = await getPDFDocument(
       await readFileAsArrayBuffer(state.files[0])
     ).promise;
-    const zip = new JSZip();
-    for (let i = 1; i <= pdf.numPages; i++) {
-      const page = await pdf.getPage(i);
-      const viewport = page.getViewport({ scale: 2.0 });
-      const canvas = document.createElement('canvas');
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
-      const context = canvas.getContext('2d');
-      await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
-      const qualityInput = document.getElementById('webp-quality') as HTMLInputElement;
-      const quality = qualityInput ? parseFloat(qualityInput.value) : 0.9;
 
-      const blob = await new Promise((resolve) =>
+    if(pdf.numPages === 1) {
-        canvas.toBlob(resolve, 'image/webp', quality)
+      const page = await pdf.getPage(1);
-      );
+      const blob = await pageToBlob(page);
-      zip.file(`page_${i}.webp`, blob as Blob);
+      downloadFile(blob, getCleanFilename(state.files[0].name) + '.webp');
+    } else {
+      const zip = new JSZip();
+      for (let i = 1; i <= pdf.numPages; i++) {
+        const page = await pdf.getPage(i);
+        const blob = await pageToBlob(page);
+        zip.file(`page_${i}.webp`, blob as Blob);
+      }
+      const zipBlob = await zip.generateAsync({ type: 'blob' });
+      downloadFile(zipBlob, getCleanFilename(state.files[0].name) + '_webps.zip');
     }
-    const zipBlob = await zip.generateAsync({ type: 'blob' });
-    downloadFile(zipBlob, 'converted_webp.zip');
   } catch (e) {
     console.error(e);
     showAlert('Error', 'Failed to convert PDF to WebP.');
@@ -39,3 +36,27 @@ export async function pdfToWebp() {
     hideLoader();
   }
 }
+
+async function pageToBlob(page: PDFPageProxy): Promise<Blob> {
+  const viewport = page.getViewport({ scale: 2.0 });
+  const canvas = document.createElement('canvas');
+  canvas.height = viewport.height;
+  canvas.width = viewport.width;
+  const context = canvas.getContext('2d');
+  await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
+  const qualityInput = document.getElementById('webp-quality') as HTMLInputElement;
+  const quality = qualityInput ? parseFloat(qualityInput.value) : 0.9;
+
+  const blob = await new Promise((resolve) =>
+    canvas.toBlob(resolve, 'image/webp', quality)
+  );
+  return blob as Blob;
+}
+
+function getCleanFilename(fileName: string): string {
+  let clean = fileName.replace(/\.pdf$/i, '').trim();
+  if (clean.length > 80) {
+    clean = clean.slice(0, 80);
+  }
+  return clean;
+}

src/js/ui.ts

@@ -868,8 +868,7 @@ export const toolTemplates = {
                 </div>
                 <p class="mt-1 text-xs text-gray-400">Higher quality = larger file size</p>
             </div>
-            <p class="mb-4 text-white text-center">Your file is ready. Click the button to download a ZIP file containing all WebP images.</p>
+            <button id="process-btn" class="btn-gradient w-full">Convert to WEBP & Download All</button>
-            <button id="process-btn" class="btn-gradient w-full">Download All as ZIP</button>
         </div>
     `,
     'webp-to-pdf': () => `