djoka/bentopdf
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sebastian Espei
2025-11-30 23:57:04 +01:00
parent e5cd2e6ab5
commit b29395a011
2 changed files with 40 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/js/logic/pdf-to-bmp.ts
View File

@@ -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();
@@ -59,33 +60,28 @@ export async function pdfToBmp() {
const pdf = await getPDFDocument(
await readFileAsArrayBuffer(state.files[0])
).promise;
const zip = new JSZip();
for (let i = 1; i <= pdf.numPages; i++) {
showLoader(`Processing page ${i} of ${pdf.numPages}...`);
const page = await pdf.getPage(i);
const viewport = page.getViewport({ scale: 1.5 });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
if(pdf.numPages === 1) {
showLoader(`Processing page 1 of ${pdf.numPages}...`);
const page = await pdf.getPage(1);
const bmpBuffer = await pageToBlob(page);
downloadFile(bmpBuffer, getCleanFilename(state.files[0].name) +'.bmp');
} else {
const zip = new JSZip();
// Render the PDF page directly to the canvas
await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
for (let i = 1; i <= pdf.numPages; i++) {
showLoader(`Processing page ${i} of ${pdf.numPages}...`);
const page = await pdf.getPage(i);
const bmpBuffer = await pageToBlob(page);
// Get the raw pixel data from this canvas
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
// Add the generated BMP file to the zip archive
zip.file(`page_${i}.bmp`, bmpBuffer);
}
// Use our new self-contained function to create the BMP file
const bmpBuffer = encodeBMP(imageData);
// Add the generated BMP file to the zip archive
zip.file(`page_${i}.bmp`, bmpBuffer);
showLoader('Compressing files into a ZIP...');
const zipBlob = await zip.generateAsync({ type: 'blob' });
downloadFile(zipBlob, getCleanFilename(state.files[0].name) + '_bmps.zip');
}
showLoader('Compressing files into a ZIP...');
const zipBlob = await zip.generateAsync({ type: 'blob' });
downloadFile(zipBlob, 'converted_bmp_images.zip');
} catch (e) {
console.error(e);
showAlert(
@@ -96,3 +92,24 @@ export async function pdfToBmp() {
hideLoader();
}
}
async function pageToBlob(page: PDFPageProxy): Promise<Blob> {
const viewport = page.getViewport({ scale: 1.5 });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render the PDF page directly to the canvas
await page.render({ canvasContext: context, viewport: viewport, canvas }).promise;
// Get the raw pixel data from this canvas
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
// Use our new self-contained function to create the BMP file
return new Blob([encodeBMP(imageData)]);
}
function getCleanFilename(fileName: string): string {
return fileName.replace(/\.pdf$/i, '');
}

2
src/js/ui.ts
View File

@@ -1287,7 +1287,7 @@ export const toolTemplates = {
<p class="mb-6 text-gray-400">Convert each page of a PDF file into a BMP image. Your files will be downloaded in a ZIP archive.</p>
${createFileInputHTML()}
<div id="file-display-area" class="mt-4 space-y-2"></div>
<button id="process-btn" class="btn-gradient w-full mt-6">Convert to BMP & Download ZIP</button>
<button id="process-btn" class="btn-gradient w-full mt-6">Convert to BMP & Download All</button>
`,
'pdf-to-tiff': () => `
<h2 class="text-2xl font-bold text-white mb-4">PDF to TIFF</h2>