@jjlmoya/utils-converters 1.23.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-converters",
-    "version": "1.23.0",
+    "version": "1.24.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -20,6 +20,9 @@ import { gifAWebp } from '../tool/gifAWebp/entry';
 import { pngAIco } from '../tool/pngAIco/entry';
 import { jpgAIco } from '../tool/jpgAIco/entry';
 import { webpAIco } from '../tool/webpAIco/entry';
+import { jpgToPdf } from '../tool/jpgToPdf/entry';
+import { pngToPdf } from '../tool/pngToPdf/entry';
+import { webpToPdf } from '../tool/webpToPdf/entry';
 
 export const convertersCategory: ConvertersCategoryEntry = {
   icon: 'mdi:image-sync',
@@ -30,6 +33,7 @@ export const convertersCategory: ConvertersCategoryEntry = {
     avifAJpg, avifAPng, avifAWebp,
     gifAJpg, gifAPng, gifAWebp,
     pngAIco, jpgAIco, webpAIco,
+    jpgToPdf, pngToPdf, webpToPdf,
   ],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

@@ -62,4 +62,7 @@ import { webpAIco } from './tool/webpAIco/entry';
 import { webpAJpg } from './tool/webpAJpg/entry';
 import { webpAPng } from './tool/webpAPng/entry';
 import { imagenBase64 } from './tool/imagenBase64/entry';
-export const ALL_ENTRIES = [avifAJpg, avifAPng, avifAWebp, bmpAJpg, bmpAPng, bmpAWebp, gifAJpg, gifAPng, gifAWebp, imagenBase64, jpgAIco, jpgAPng, jpgAWebp, pngAIco, pngAJpg, pngAWebp, svgAJpg, svgAPng, webpAIco, webpAJpg, webpAPng];
+import { jpgToPdf } from './tool/jpgToPdf/entry';
+import { pngToPdf } from './tool/pngToPdf/entry';
+import { webpToPdf } from './tool/webpToPdf/entry';
+export const ALL_ENTRIES = [avifAJpg, avifAPng, avifAWebp, bmpAJpg, bmpAPng, bmpAWebp, gifAJpg, gifAPng, gifAWebp, imagenBase64, jpgAIco, jpgAPng, jpgAWebp, pngAIco, pngAJpg, pngAWebp, svgAJpg, svgAPng, webpAIco, webpAJpg, webpAPng, jpgToPdf, pngToPdf, webpToPdf];

package/src/index.ts

@@ -19,6 +19,9 @@ export * from './tool/gifAWebp';
 export * from './tool/pngAIco';
 export * from './tool/jpgAIco';
 export * from './tool/webpAIco';
+export * from './tool/jpgToPdf';
+export * from './tool/pngToPdf';
+export * from './tool/webpToPdf';
 
 export { convertersCategory } from './category';
 export const ConvertersCategorySEO = () => import('./category/seo.astro').then((m) => m.default);

package/src/shared/ImageToPdfConverter.astro

@@ -0,0 +1,80 @@
+---
+import type { ImageToPdfUI, SourceImageFormat } from './image-to-pdf/ui';
+
+interface Props {
+  ui: ImageToPdfUI;
+  sourceFormat: SourceImageFormat;
+}
+
+const { ui, sourceFormat } = Astro.props;
+const accept = sourceFormat === 'jpg' ? '.jpg,.jpeg,image/jpeg' : `.${sourceFormat},image/${sourceFormat}`;
+---
+
+<div class:list={["pdf-converter", `pdf-converter-${sourceFormat}`]} data-source-format={sourceFormat} data-ui={JSON.stringify(ui)}>
+  <section class="pdf-converter-stage" id="pdf-dropzone">
+    <span class="pdf-converter-mark" aria-hidden="true">PDF</span>
+    <h2>{ui.dropTitle}</h2>
+    <p>{ui.dropText}</p>
+    <p class="pdf-converter-privacy">{ui.privacyNote}</p>
+    <button class="pdf-converter-select" type="button">{ui.selectFiles}</button>
+    <input class="pdf-file-input" id="pdf-file-input" type="file" accept={accept} multiple hidden />
+  </section>
+
+  <section class="pdf-converter-workspace" id="pdf-workspace" hidden>
+    <div class="pdf-converter-toolbar">
+      <div>
+        <h2>{ui.optionsTitle}</h2>
+        <p><span id="pdf-page-size-value"></span> · <span id="pdf-orientation-value"></span></p>
+      </div>
+      <button class="pdf-converter-secondary" id="pdf-reset" type="button">{ui.reset}</button>
+    </div>
+
+    <div class="pdf-converter-content">
+      <section class="pdf-converter-options" aria-labelledby="pdf-options-title">
+        <h3 id="pdf-options-title">{ui.settingsTitle}</h3>
+        <div class="pdf-converter-option-line">
+          <span class="pdf-converter-option-label">{ui.pageSizeLabel}</span>
+          <div class="pdf-converter-choices">
+            <button class="pdf-converter-choice" type="button" data-page-size="a4" aria-pressed="false">{ui.a4}</button>
+            <button class="pdf-converter-choice" type="button" data-page-size="letter" aria-pressed="false">{ui.letter}</button>
+          </div>
+        </div>
+        <div class="pdf-converter-option-line">
+          <span class="pdf-converter-option-label">{ui.orientationLabel}</span>
+          <div class="pdf-converter-choices">
+            <button class="pdf-converter-choice" type="button" data-orientation="portrait" aria-pressed="false">{ui.portrait}</button>
+            <button class="pdf-converter-choice" type="button" data-orientation="landscape" aria-pressed="false">{ui.landscape}</button>
+          </div>
+        </div>
+        <div class="pdf-converter-option-line">
+          <div class="pdf-converter-toolbar"><span class="pdf-converter-option-label">{ui.marginLabel}</span><strong class="pdf-converter-value" id="pdf-margin-value"></strong></div>
+          <input class="pdf-converter-range" id="pdf-margin" type="range" min="0" max="32" step="1" value="12" aria-label={ui.marginLabel} />
+        </div>
+      </section>
+
+      <section class="pdf-converter-pages" aria-labelledby="pdf-pages-title">
+        <div class="pdf-converter-pages-header">
+          <div>
+            <h3 id="pdf-pages-title">{ui.pagesTitle}</h3>
+            <p>{ui.reorderHint}</p>
+          </div>
+        </div>
+        <ol class="pdf-pages" id="pdf-page-list"><li class="pdf-pages-empty">{ui.emptyPages}</li></ol>
+      </section>
+    </div>
+
+    <div class="pdf-converter-footer">
+      <span class="pdf-converter-status" id="pdf-status" data-tone="neutral">{ui.ready}</span>
+      <div class="pdf-converter-actions">
+        <button class="pdf-converter-primary" id="pdf-create" type="button" disabled>{ui.createPdf}</button>
+        <a class="pdf-converter-download" id="pdf-download" href="#" hidden>{ui.downloadPdf}</a>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import { mountImageToPdf } from './image-to-pdf/controller';
+
+  document.querySelectorAll<HTMLElement>('.pdf-converter').forEach(mountImageToPdf);
+</script>

package/src/shared/image-to-pdf/controller.ts

@@ -0,0 +1,173 @@
+import { canCreatePdf, type PageStatus } from './evaluator';
+import { buildPdf, encodeImage, getPdfFileName, isSupportedFile, type Orientation, type PageSize, type PdfPageImage } from './logic';
+import { renderOptions, renderPages, setStatus, setWorkspace, type PageViewModel } from './dom-views';
+import { loadPdfOptions, savePdfOptions, type StoredPdfOptions } from './storage';
+import type { ImageToPdfUI, SourceImageFormat } from './ui';
+
+interface PageState extends PageViewModel, PdfPageImage {
+  status: PageStatus;
+}
+
+interface ConverterState {
+  pages: PageState[];
+  options: StoredPdfOptions;
+  outputUrl: string;
+}
+
+interface AddFilesParams {
+  root: HTMLElement;
+  state: ConverterState;
+  files: File[];
+  source: SourceImageFormat;
+  ui: ImageToPdfUI;
+}
+
+function parseUi(root: HTMLElement): ImageToPdfUI {
+  return JSON.parse(root.dataset.ui ?? '{}') as ImageToPdfUI;
+}
+
+function getSource(root: HTMLElement): SourceImageFormat {
+  return (root.dataset.sourceFormat ?? 'jpg') as SourceImageFormat;
+}
+
+function resetOutput(root: HTMLElement, state: ConverterState): void {
+  if (state.outputUrl) URL.revokeObjectURL(state.outputUrl);
+  state.outputUrl = '';
+  const download = root.querySelector<HTMLAnchorElement>('#pdf-download');
+  download?.toggleAttribute('hidden', true);
+}
+
+function syncPages(root: HTMLElement, state: ConverterState, ui: ImageToPdfUI): void {
+  const list = root.querySelector<HTMLOListElement>('#pdf-page-list');
+  if (!list) return;
+  renderPages(list, state.pages, ui);
+  setWorkspace(root, state.pages.length > 0);
+  const create = root.querySelector<HTMLButtonElement>('#pdf-create');
+  if (create) create.disabled = !canCreatePdf(state.pages.map((page) => page.status));
+}
+
+function createPage(file: File, previewUrl: string): PageState {
+  return { id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, name: file.name, previewUrl, status: 'processing', width: 0, height: 0, jpegBytes: new Uint8Array() };
+}
+
+async function processPage(page: PageState, file: File, source: SourceImageFormat): Promise<void> {
+  const encoded = await encodeImage(file, source);
+  page.width = encoded.width;
+  page.height = encoded.height;
+  page.jpegBytes = encoded.jpegBytes;
+  page.status = 'ready';
+}
+
+async function addFiles({ root, state, files, source, ui }: AddFilesParams): Promise<void> {
+  for (const file of files) {
+    if (!isSupportedFile(file, source)) {
+      setStatus(root, ui.invalidFile, 'error');
+      continue;
+    }
+    const page = createPage(file, URL.createObjectURL(file));
+    state.pages.push(page);
+    syncPages(root, state, ui);
+    try {
+      await processPage(page, file, source);
+    } catch {
+      page.status = 'error';
+      page.error = ui.error;
+    }
+    syncPages(root, state, ui);
+  }
+  const pageWord = state.pages.length === 1 ? ui.pageSingular : ui.pagePlural;
+  setStatus(root, `${state.pages.length} ${pageWord}`, 'neutral');
+}
+
+function movePage(state: ConverterState, id: string, direction: number): void {
+  const index = state.pages.findIndex((page) => page.id === id);
+  const next = index + direction;
+  if (index < 0 || next < 0 || next >= state.pages.length) return;
+  const [page] = state.pages.splice(index, 1);
+  if (page) state.pages.splice(next, 0, page);
+}
+
+function removePage(state: ConverterState, id: string): void {
+  const index = state.pages.findIndex((page) => page.id === id);
+  if (index < 0) return;
+  const [page] = state.pages.splice(index, 1);
+  if (page) URL.revokeObjectURL(page.previewUrl);
+}
+
+function updateOptions(root: HTMLElement, state: ConverterState, ui: ImageToPdfUI): void {
+  renderOptions(root, state.options, ui);
+  savePdfOptions(state.options);
+  resetOutput(root, state);
+}
+
+function createPdf(root: HTMLElement, state: ConverterState, ui: ImageToPdfUI, source: SourceImageFormat): void {
+  if (!canCreatePdf(state.pages.map((page) => page.status))) return;
+  setStatus(root, ui.building, 'neutral');
+  const bytes = buildPdf(state.pages, state.options);
+  const pdfBuffer = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength) as ArrayBuffer;
+  state.outputUrl = URL.createObjectURL(new Blob([pdfBuffer], { type: 'application/pdf' }));
+  const download = root.querySelector<HTMLAnchorElement>('#pdf-download');
+  if (!download) return;
+  download.href = state.outputUrl;
+  download.download = getPdfFileName(source);
+  download.textContent = ui.downloadPdf;
+  download.toggleAttribute('hidden', false);
+  setStatus(root, ui.pdfReady, 'ready');
+}
+
+function resetConverter(root: HTMLElement, state: ConverterState, ui: ImageToPdfUI): void {
+  state.pages.forEach((page) => URL.revokeObjectURL(page.previewUrl));
+  state.pages = [];
+  resetOutput(root, state);
+  syncPages(root, state, ui);
+  setStatus(root, ui.ready, 'neutral');
+}
+
+function bindFileInput(root: HTMLElement, state: ConverterState, source: SourceImageFormat, ui: ImageToPdfUI): void {
+  const input = root.querySelector<HTMLInputElement>('#pdf-file-input');
+  const dropzone = root.querySelector<HTMLElement>('#pdf-dropzone');
+  dropzone?.addEventListener('click', () => input?.click());
+  dropzone?.addEventListener('dragover', (event) => { event.preventDefault(); dropzone.classList.add('is-dragging'); });
+  dropzone?.addEventListener('dragleave', () => dropzone.classList.remove('is-dragging'));
+  dropzone?.addEventListener('drop', (event) => { event.preventDefault(); dropzone.classList.remove('is-dragging'); void addFiles({ root, state, files: [...(event.dataTransfer?.files ?? [])], source, ui }); });
+  input?.addEventListener('change', () => { void addFiles({ root, state, files: [...(input.files ?? [])], source, ui }); input.value = ''; });
+}
+
+function bindOptions(root: HTMLElement, state: ConverterState, ui: ImageToPdfUI): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-page-size]').forEach((button) => button.addEventListener('click', () => { state.options.pageSize = button.dataset.pageSize as PageSize; updateOptions(root, state, ui); }));
+  root.querySelectorAll<HTMLButtonElement>('[data-orientation]').forEach((button) => button.addEventListener('click', () => { state.options.orientation = button.dataset.orientation as Orientation; updateOptions(root, state, ui); }));
+  root.querySelector<HTMLInputElement>('#pdf-margin')?.addEventListener('input', (event) => { state.options.marginMm = Number((event.target as HTMLInputElement).value); updateOptions(root, state, ui); });
+}
+
+function handlePageAction(root: HTMLElement, state: ConverterState, ui: ImageToPdfUI, event: Event): void {
+  const target = event.target as HTMLElement;
+  const item = target.closest<HTMLElement>('[data-page-id]');
+  if (!item) return;
+  const pageId = item.dataset.pageId ?? '';
+  switch (target.dataset.action) {
+    case 'up': movePage(state, pageId, -1); break;
+    case 'down': movePage(state, pageId, 1); break;
+    case 'remove': removePage(state, pageId); break;
+    default: return;
+  }
+  syncPages(root, state, ui);
+  resetOutput(root, state);
+}
+
+function bindPageActions(root: HTMLElement, state: ConverterState, ui: ImageToPdfUI): void {
+  const list = root.querySelector('#pdf-page-list');
+  if (!list) return;
+  list.addEventListener('click', (event) => handlePageAction(root, state, ui, event));
+}
+
+export function mountImageToPdf(root: HTMLElement): void {
+  const ui = parseUi(root);
+  const source = getSource(root);
+  const state: ConverterState = { pages: [], options: loadPdfOptions(), outputUrl: '' };
+  renderOptions(root, state.options, ui);
+  bindFileInput(root, state, source, ui);
+  bindOptions(root, state, ui);
+  bindPageActions(root, state, ui);
+  root.querySelector('#pdf-create')?.addEventListener('click', () => createPdf(root, state, ui, source));
+  root.querySelector('#pdf-reset')?.addEventListener('click', () => resetConverter(root, state, ui));
+}

package/src/shared/image-to-pdf/dom-views.ts

@@ -0,0 +1,55 @@
+import { statusLabel, type PageStatus } from './evaluator';
+import type { ImageToPdfUI } from './ui';
+
+export interface PageViewModel {
+  id: string;
+  name: string;
+  previewUrl: string;
+  status: PageStatus;
+  error?: string;
+}
+
+function actionButton(label: string, action: string, disabled: boolean): string {
+  return `<button type="button" class="pdf-page-action" data-action="${action}" aria-label="${label}"${disabled ? ' disabled' : ''}>${label}</button>`;
+}
+
+function pageMarkup(page: PageViewModel, index: number, total: number, ui: ImageToPdfUI): string {
+  const status = statusLabel(page.status, ui);
+  const error = page.error ? `<span class="pdf-page-error">${page.error}</span>` : '';
+  return `<li class="pdf-page" data-page-id="${page.id}"><span class="pdf-page-number">${index + 1}</span><img class="pdf-page-thumb" src="${page.previewUrl}" alt="${page.name}"><span class="pdf-page-meta"><strong>${page.name}</strong><span>${ui.page} ${index + 1} · ${status}</span>${error}</span><span class="pdf-page-actions">${actionButton(ui.moveUp, 'up', index === 0)}${actionButton(ui.moveDown, 'down', index === total - 1)}${actionButton(ui.remove, 'remove', false)}</span></li>`;
+}
+
+export function renderPages(list: HTMLOListElement, pages: PageViewModel[], ui: ImageToPdfUI): void {
+  list.innerHTML = pages.length ? pages.map((page, index) => pageMarkup(page, index, pages.length, ui)).join('') : `<li class="pdf-pages-empty">${ui.emptyPages}</li>`;
+}
+
+export function renderOptions(root: HTMLElement, options: { pageSize: string; orientation: string; marginMm: number }, ui: ImageToPdfUI): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-page-size]').forEach((button) => {
+    button.classList.toggle('is-active', button.dataset.pageSize === options.pageSize);
+    button.setAttribute('aria-pressed', String(button.dataset.pageSize === options.pageSize));
+  });
+  root.querySelectorAll<HTMLButtonElement>('[data-orientation]').forEach((button) => {
+    button.classList.toggle('is-active', button.dataset.orientation === options.orientation);
+    button.setAttribute('aria-pressed', String(button.dataset.orientation === options.orientation));
+  });
+  const margin = root.querySelector<HTMLInputElement>('#pdf-margin');
+  const marginValue = root.querySelector<HTMLElement>('#pdf-margin-value');
+  if (margin) margin.value = String(options.marginMm);
+  if (marginValue) marginValue.textContent = `${options.marginMm} mm`;
+  const pageSize = root.querySelector<HTMLElement>('#pdf-page-size-value');
+  const orientation = root.querySelector<HTMLElement>('#pdf-orientation-value');
+  if (pageSize) pageSize.textContent = options.pageSize === 'a4' ? ui.a4 : ui.letter;
+  if (orientation) orientation.textContent = options.orientation === 'portrait' ? ui.portrait : ui.landscape;
+}
+
+export function setWorkspace(root: HTMLElement, visible: boolean): void {
+  const workspace = root.querySelector<HTMLElement>('#pdf-workspace');
+  workspace?.toggleAttribute('hidden', !visible);
+}
+
+export function setStatus(root: HTMLElement, text: string, tone: string): void {
+  const status = root.querySelector<HTMLElement>('#pdf-status');
+  if (!status) return;
+  status.textContent = text;
+  status.dataset.tone = tone;
+}

package/src/shared/image-to-pdf/evaluator.ts

@@ -0,0 +1,18 @@
+import type { ImageToPdfUI } from './ui';
+
+export type PageStatus = 'processing' | 'ready' | 'error';
+
+export interface EvaluatedPage {
+  status: PageStatus;
+  error?: string;
+}
+
+export function canCreatePdf(statuses: PageStatus[]): boolean {
+  return statuses.length > 0 && statuses.every((status) => status === 'ready');
+}
+
+export function statusLabel(status: PageStatus, ui: ImageToPdfUI): string {
+  if (status === 'ready') return ui.ready;
+  if (status === 'processing') return ui.processing;
+  return ui.error;
+}

package/src/shared/image-to-pdf/logic.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { buildPdf, fitImageInPage, getMarginPoints, getPageDimensions } from './logic';
+
+const image = { id: 'one', name: 'one.jpg', width: 1200, height: 800, jpegBytes: new Uint8Array([255, 216, 255, 217]) };
+
+describe('image to PDF logic', () => {
+  it('calculates paper dimensions and margins', () => {
+    expect(getPageDimensions({ pageSize: 'a4', orientation: 'portrait', marginMm: 12 })).toEqual({ width: 595.28, height: 841.89 });
+    expect(getPageDimensions({ pageSize: 'letter', orientation: 'landscape', marginMm: 12 })).toEqual({ width: 792, height: 612 });
+    expect(getMarginPoints(25.4)).toBe(72);
+  });
+
+  it('fits an image inside the printable area', () => {
+    const fitted = fitImageInPage(image, { pageSize: 'a4', orientation: 'portrait', marginMm: 12 });
+    expect(fitted.width).toBeLessThan(595.28);
+    expect(fitted.height).toBeLessThan(841.89);
+    expect(fitted.x).toBeGreaterThan(0);
+    expect(fitted.y).toBeGreaterThan(0);
+  });
+
+  it('builds a PDF with one page and an embedded JPEG stream', () => {
+    const pdf = new TextDecoder().decode(buildPdf([image], { pageSize: 'a4', orientation: 'portrait', marginMm: 12 }));
+    expect(pdf).toContain('%PDF-1.4');
+    expect(pdf).toContain('/Type /Page');
+    expect(pdf).toContain('/Filter /DCTDecode');
+    expect(pdf).toContain('/Count 1');
+    expect(pdf).toContain('%%EOF');
+  });
+});

package/src/shared/image-to-pdf/logic.ts

@@ -0,0 +1,214 @@
+import type { SourceImageFormat } from './ui';
+
+export type PageSize = 'a4' | 'letter';
+export type Orientation = 'portrait' | 'landscape';
+
+export interface PdfOptions {
+  pageSize: PageSize;
+  orientation: Orientation;
+  marginMm: number;
+}
+
+export interface PdfPageImage {
+  id: string;
+  name: string;
+  width: number;
+  height: number;
+  jpegBytes: Uint8Array;
+}
+
+interface PageDimensions {
+  width: number;
+  height: number;
+}
+
+interface DrawnImage extends PageDimensions {
+  x: number;
+  y: number;
+}
+
+const MM_TO_POINTS = 72 / 25.4;
+const PAGE_DIMENSIONS: Record<PageSize, PageDimensions> = {
+  a4: { width: 595.28, height: 841.89 },
+  letter: { width: 612, height: 792 },
+};
+
+export function getPageDimensions(options: PdfOptions): PageDimensions {
+  const dimensions = PAGE_DIMENSIONS[options.pageSize];
+  const isLandscape = options.orientation === 'landscape';
+  return isLandscape
+    ? { width: dimensions.height, height: dimensions.width }
+    : { ...dimensions };
+}
+
+export function getMarginPoints(marginMm: number): number {
+  return Math.max(0, marginMm) * MM_TO_POINTS;
+}
+
+export function fitImageInPage(
+  image: Pick<PdfPageImage, 'width' | 'height'>,
+  options: PdfOptions,
+): DrawnImage {
+  const page = getPageDimensions(options);
+  const margin = getMarginPoints(options.marginMm);
+  const availableWidth = Math.max(1, page.width - margin * 2);
+  const availableHeight = Math.max(1, page.height - margin * 2);
+  const scale = Math.min(availableWidth / image.width, availableHeight / image.height);
+  const width = image.width * scale;
+  const height = image.height * scale;
+  return {
+    width,
+    height,
+    x: (page.width - width) / 2,
+    y: (page.height - height) / 2,
+  };
+}
+
+export function isSupportedFile(file: File, source: SourceImageFormat): boolean {
+  const extension = file.name.split('.').pop()?.toLowerCase();
+  const allowed = source === 'jpg' ? ['jpg', 'jpeg'] : [source];
+  return allowed.includes(extension ?? '') || file.type === `image/${source === 'jpg' ? 'jpeg' : source}`;
+}
+
+export function getPdfFileName(source: SourceImageFormat): string {
+  return `${source}-images.pdf`;
+}
+
+function textBytes(value: string): Uint8Array {
+  return new TextEncoder().encode(value);
+}
+
+function concatBytes(chunks: Uint8Array[]): Uint8Array {
+  const total = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+  const result = new Uint8Array(total);
+  let offset = 0;
+  chunks.forEach((chunk) => {
+    result.set(chunk, offset);
+    offset += chunk.length;
+  });
+  return result;
+}
+
+function streamObject(dictionary: string, stream: Uint8Array): Uint8Array {
+  return concatBytes([textBytes(`${dictionary}\nstream\n`), stream, textBytes('\nendstream')]);
+}
+
+function makePageObjects(page: PdfPageImage, index: number, options: PdfOptions): { pageObject: Uint8Array; imageObject: Uint8Array; contentObject: Uint8Array; pageNumber: number } {
+  const pageNumber = 3 + index * 3;
+  const imageNumber = pageNumber + 1;
+  const contentNumber = pageNumber + 2;
+  const imageDictionary = `<< /Type /XObject /Subtype /Image /Width ${page.width} /Height ${page.height} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /DCTDecode /Length ${page.jpegBytes.length} >>`;
+  const imageObject = streamObject(imageDictionary, page.jpegBytes);
+  const drawn = fitImageInPage(page, options);
+  const content = textBytes(`q\n${drawn.width.toFixed(2)} 0 0 ${drawn.height.toFixed(2)} ${drawn.x.toFixed(2)} ${drawn.y.toFixed(2)} cm\n/Im${index} Do\nQ`);
+  const pageBody = `<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${getPageDimensions(options).width} ${getPageDimensions(options).height}] /Resources << /XObject << /Im${index} ${imageNumber} 0 R >> >> /Contents ${contentNumber} 0 R >>`;
+  return {
+    pageObject: textBytes(pageBody),
+    imageObject,
+    contentObject: streamObject(`<< /Length ${content.length} >>`, content),
+    pageNumber,
+  };
+}
+
+function serializeObjects(objects: Map<number, Uint8Array>, maxObject: number): Uint8Array {
+  const chunks: Uint8Array[] = [new Uint8Array([37, 80, 68, 70, 45, 49, 46, 52, 10, 37, 255, 255, 255, 255, 10])];
+  const offsets = new Array<number>(maxObject + 1).fill(0);
+  let offset = chunks[0]?.length ?? 0;
+  for (let number = 1; number <= maxObject; number += 1) {
+    const object = objects.get(number) ?? new Uint8Array();
+    offsets[number] = offset;
+    const chunk = concatBytes([textBytes(`${number} 0 obj\n`), object, textBytes('\nendobj\n')]);
+    chunks.push(chunk);
+    offset += chunk.length;
+  }
+  const xrefOffset = offset;
+  const xref = [`xref\n0 ${maxObject + 1}\n0000000000 65535 f \n`];
+  for (let number = 1; number <= maxObject; number += 1) {
+    xref.push(`${String(offsets[number]).padStart(10, '0')} 00000 n \n`);
+  }
+  chunks.push(textBytes(xref.join('')));
+  chunks.push(textBytes(`trailer\n<< /Size ${maxObject + 1} /Root 1 0 R >>\nstartxref\n${xrefOffset}\n%%EOF`));
+  return concatBytes(chunks);
+}
+
+export function buildPdf(pages: PdfPageImage[], options: PdfOptions): Uint8Array {
+  const objects = new Map<number, Uint8Array>();
+  const pageNumbers: number[] = [];
+  pages.forEach((page, index) => {
+    const created = makePageObjects(page, index, options);
+    pageNumbers.push(created.pageNumber);
+    objects.set(created.pageNumber, created.pageObject);
+    objects.set(created.pageNumber + 1, created.imageObject);
+    objects.set(created.pageNumber + 2, created.contentObject);
+  });
+  objects.set(2, textBytes(`<< /Type /Pages /Kids [${pageNumbers.map((number) => `${number} 0 R`).join(' ')}] /Count ${pages.length} >>`));
+  objects.set(1, textBytes('<< /Type /Catalog /Pages 2 0 R >>'));
+  return serializeObjects(objects, Math.max(2, 2 + pages.length * 3));
+}
+
+async function loadBitmap(file: File): Promise<{ bitmap: ImageBitmap | HTMLImageElement; width: number; height: number }> {
+  if ('createImageBitmap' in window) {
+    const bitmap = await createImageBitmap(file);
+    return { bitmap, width: bitmap.width, height: bitmap.height };
+  }
+  const url = URL.createObjectURL(file);
+  const image = await new Promise<HTMLImageElement>((resolve, reject) => {
+    const element = new Image();
+    element.onload = () => resolve(element);
+    element.onerror = () => reject(new Error('Image could not be read'));
+    element.src = url;
+  });
+  URL.revokeObjectURL(url);
+  return { bitmap: image, width: image.naturalWidth, height: image.naturalHeight };
+}
+
+async function canvasJpeg(file: File): Promise<{ bytes: Uint8Array; width: number; height: number }> {
+  const loaded = await loadBitmap(file);
+  const canvas = document.createElement('canvas');
+  canvas.width = loaded.width;
+  canvas.height = loaded.height;
+  const context = canvas.getContext('2d');
+  if (!context) throw new Error('Canvas is unavailable');
+  context.fillStyle = '#fff';
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(loaded.bitmap, 0, 0);
+  const blob = await new Promise<Blob>((resolve, reject) => canvas.toBlob((value) => value ? resolve(value) : reject(new Error('JPEG export failed')), 'image/jpeg', 0.94));
+  if ('close' in loaded.bitmap) loaded.bitmap.close();
+  return { bytes: new Uint8Array(await blob.arrayBuffer()), width: loaded.width, height: loaded.height };
+}
+
+function readJpegSegment(bytes: Uint8Array, offset: number): { marker: number; length: number } {
+  return { marker: bytes[offset + 1]!, length: (bytes[offset + 2]! << 8) + bytes[offset + 3]! };
+}
+
+function isFrameMarker(marker: number): boolean {
+  return marker >= 0xc0 && marker <= 0xc3;
+}
+
+function readFrameDimensions(bytes: Uint8Array, offset: number): { width: number; height: number } {
+  return { height: (bytes[offset + 5]! << 8) + bytes[offset + 6]!, width: (bytes[offset + 7]! << 8) + bytes[offset + 8]! };
+}
+
+function readJpegDimensions(bytes: Uint8Array): { width: number; height: number } {
+  let offset = 2;
+  while (offset + 9 < bytes.length) {
+    if (bytes[offset] !== 0xff) {
+      offset += 1;
+      continue;
+    }
+    const segment = readJpegSegment(bytes, offset);
+    if (isFrameMarker(segment.marker)) return readFrameDimensions(bytes, offset);
+    offset += segment.length + 2;
+  }
+  throw new Error('JPEG dimensions are unavailable');
+}
+
+export async function encodeImage(file: File, source: SourceImageFormat): Promise<Omit<PdfPageImage, 'id' | 'name'>> {
+  if (source === 'jpg') {
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    const dimensions = readJpegDimensions(bytes);
+    return { jpegBytes: bytes, ...dimensions };
+  }
+  const encoded = await canvasJpeg(file);
+  return { jpegBytes: encoded.bytes, width: encoded.width, height: encoded.height };
+}

package/src/shared/image-to-pdf/storage.ts

@@ -0,0 +1,36 @@
+import type { Orientation, PageSize } from './logic';
+
+export interface StoredPdfOptions {
+  pageSize: PageSize;
+  orientation: Orientation;
+  marginMm: number;
+}
+
+const STORAGE_KEY = 'jjlmoya-image-to-pdf-options';
+
+const fallback: StoredPdfOptions = {
+  pageSize: 'a4',
+  orientation: 'portrait',
+  marginMm: 12,
+};
+
+export function loadPdfOptions(): StoredPdfOptions {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    if (!saved) return fallback;
+    const parsed = JSON.parse(saved) as Partial<StoredPdfOptions>;
+    return {
+      pageSize: parsed.pageSize === 'letter' ? 'letter' : 'a4',
+      orientation: parsed.orientation === 'landscape' ? 'landscape' : 'portrait',
+      marginMm: typeof parsed.marginMm === 'number' ? Math.min(32, Math.max(0, parsed.marginMm)) : fallback.marginMm,
+    };
+  } catch {
+    return fallback;
+  }
+}
+
+export function savePdfOptions(options: StoredPdfOptions): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(options));
+  } catch {}
+}