feat: all AI formats printable, crop-vs-border rule, mobile layout, Passbilder rename
Print now offers every format the AI pipeline knows (9x13 to 60x90, DIN A6-A2, squares, poster/frame sizes to 70x100, and the screen ratios as physical sizes). When a picture does not match the target ratio the user picks per image between cropping to fill and keeping the whole picture on a border colour - never a stretch. The module is called Passbilder now; /druck redirects. Fixes two real defects: sharp runs extend after resize, so padded cells came out oversized (a 35x45 mm cell became 35x171 mm with a border), and the grid packer rotated a single portrait photo just because more would fit sideways. Mobile: cards become rows, touch targets ~40px, crop editor as a bottom sheet. Verified at 390/820/1440px - all three produce the same PDF.
This commit is contained in:
+23
-8
@@ -29,27 +29,35 @@ export interface PhotoSize { id: string; label: string; w: number; h: number; gr
|
||||
|
||||
export const PHOTO_SIZES: PhotoSize[] = [
|
||||
// Passbild / Ausweis
|
||||
{ id: 'P35x45', label: 'Biometrisches Passbild 35 × 45 mm', w: 35, h: 45, group: 'Passbild' },
|
||||
{ id: 'P50x50', label: 'Visum USA 50 × 50 mm (2 × 2 in)', w: 50.8, h: 50.8, group: 'Passbild' },
|
||||
{ id: 'P35x45', label: 'Passbild 35 × 45 mm (biometrisch)', w: 35, h: 45, group: 'Passbild' },
|
||||
{ id: 'P50x50', label: 'Visum USA 51 × 51 mm (2 × 2 in)', w: 50.8, h: 50.8, group: 'Passbild' },
|
||||
// Kleinformate (Kita, Schule, Portemonnaie)
|
||||
{ id: 'K20x30', label: '2 × 3 cm', w: 20, h: 30, group: 'Klein' },
|
||||
{ id: 'K30x40', label: '3 × 4 cm', w: 30, h: 40, group: 'Klein' },
|
||||
{ id: 'K40x50', label: '4 × 5 cm', w: 40, h: 50, group: 'Klein' },
|
||||
{ id: 'K45x60', label: '4,5 × 6 cm', w: 45, h: 60, group: 'Klein' },
|
||||
{ id: 'K60x80', label: '6 × 8 cm', w: 60, h: 80, group: 'Klein' },
|
||||
{ id: 'K60x90', label: '6 × 9 cm', w: 60, h: 90, group: 'Klein' },
|
||||
// Klassische Fotoformate
|
||||
// Klassische Fotoformate — deckungsgleich mit den KI-Formaten aus src/lib/format.ts
|
||||
{ id: 'S9x13', label: '9 × 13 cm', w: 90, h: 130, group: 'Foto' },
|
||||
{ id: 'S10x15', label: '10 × 15 cm', w: 100, h: 150, group: 'Foto' },
|
||||
{ id: 'S11x15', label: '11 × 15 cm', w: 110, h: 150, group: 'Foto' },
|
||||
{ id: 'S12x15', label: '12 × 15 cm', w: 120, h: 150, group: 'Foto' },
|
||||
{ id: 'S13x18', label: '13 × 18 cm', w: 130, h: 180, group: 'Foto' },
|
||||
{ id: 'S15x20', label: '15 × 20 cm', w: 150, h: 200, group: 'Foto' },
|
||||
{ id: 'S18x24', label: '18 × 24 cm', w: 180, h: 240, group: 'Foto' },
|
||||
{ id: 'S20x25', label: '20 × 25 cm', w: 200, h: 250, group: 'Foto' },
|
||||
{ id: 'S20x30', label: '20 × 30 cm', w: 200, h: 300, group: 'Foto' },
|
||||
{ id: 'S30x40', label: '30 × 40 cm', w: 300, h: 400, group: 'Foto' },
|
||||
{ id: 'S30x45', label: '30 × 45 cm', w: 300, h: 450, group: 'Foto' },
|
||||
{ id: 'S40x50', label: '40 × 50 cm', w: 400, h: 500, group: 'Foto' },
|
||||
{ id: 'S40x60', label: '40 × 60 cm', w: 400, h: 600, group: 'Foto' },
|
||||
{ id: 'S50x70', label: '50 × 70 cm', w: 500, h: 700, group: 'Foto' },
|
||||
{ id: 'S24x30', label: '24 × 30 cm', w: 240, h: 300, group: 'Foto' },
|
||||
// Poster- und Rahmenformate (Bilderrahmen im Handel)
|
||||
{ id: 'R30x40', label: '30 × 40 cm', w: 300, h: 400, group: 'Poster & Rahmen' },
|
||||
{ id: 'R30x45', label: '30 × 45 cm', w: 300, h: 450, group: 'Poster & Rahmen' },
|
||||
{ id: 'R40x50', label: '40 × 50 cm', w: 400, h: 500, group: 'Poster & Rahmen' },
|
||||
{ id: 'R40x60', label: '40 × 60 cm', w: 400, h: 600, group: 'Poster & Rahmen' },
|
||||
{ id: 'R50x70', label: '50 × 70 cm', w: 500, h: 700, group: 'Poster & Rahmen' },
|
||||
{ id: 'R60x80', label: '60 × 80 cm', w: 600, h: 800, group: 'Poster & Rahmen' },
|
||||
{ id: 'R60x90', label: '60 × 90 cm', w: 600, h: 900, group: 'Poster & Rahmen' },
|
||||
{ id: 'R70x100', label: '70 × 100 cm', w: 700, h: 1000, group: 'Poster & Rahmen' },
|
||||
// Quadrate
|
||||
{ id: 'Q10x10', label: '10 × 10 cm', w: 100, h: 100, group: 'Quadrat' },
|
||||
{ id: 'Q13x13', label: '13 × 13 cm', w: 130, h: 130, group: 'Quadrat' },
|
||||
@@ -60,6 +68,13 @@ export const PHOTO_SIZES: PhotoSize[] = [
|
||||
{ id: 'DA5', label: 'DIN A5 (14,8 × 21 cm)', w: 148, h: 210, group: 'DIN' },
|
||||
{ id: 'DA4', label: 'DIN A4 (21 × 29,7 cm)', w: 210, h: 297, group: 'DIN' },
|
||||
{ id: 'DA3', label: 'DIN A3 (29,7 × 42 cm)', w: 297, h: 420, group: 'DIN' },
|
||||
{ id: 'DA2', label: 'DIN A2 (42 × 59,4 cm)', w: 420, h: 594, group: 'DIN' },
|
||||
// Bildschirm-Seitenverhältnisse als Druckmaß (The Frame & Co.)
|
||||
{ id: 'W16x9', label: '16:9 „The Frame" (30 cm breit)', w: 300, h: 168.75, group: 'Seitenverhältnis' },
|
||||
{ id: 'W9x16', label: '9:16 Hochformat (30 cm hoch)', w: 168.75, h: 300, group: 'Seitenverhältnis' },
|
||||
{ id: 'W3x2', label: '3:2 (auf 30 cm)', w: 300, h: 200, group: 'Seitenverhältnis' },
|
||||
{ id: 'W4x3', label: '4:3 (auf 30 cm)', w: 300, h: 225, group: 'Seitenverhältnis' },
|
||||
{ id: 'W5x4', label: '5:4 (auf 30 cm)', w: 300, h: 240, group: 'Seitenverhältnis' },
|
||||
];
|
||||
|
||||
export const paperById = (id: string) => PAPERS.find((p) => p.id === id) || null;
|
||||
|
||||
@@ -156,10 +156,14 @@ function gridPack(units: { specId: string; copy: number; w: number; h: number }[
|
||||
cols: Math.max(0, Math.floor((availW + gap + EPS) / (a + gap))),
|
||||
rows: Math.max(0, Math.floor((availH + gap + EPS) / (b + gap))),
|
||||
});
|
||||
// Die vom Nutzer gewählte Ausrichtung hat Vorrang. Gedreht wird nur, wenn das
|
||||
// die Zahl der Bogen tatsächlich senkt (oder ungedreht gar nichts passt).
|
||||
let best = fit(w, h);
|
||||
if (spec?.allowRotate !== false && Math.abs(w - h) > EPS) {
|
||||
const alt = fit(h, w);
|
||||
if (alt.cols * alt.rows > best.cols * best.rows) { best = alt; [w, h] = [h, w]; rot = true; }
|
||||
const plainN = best.cols * best.rows, altN = alt.cols * alt.rows;
|
||||
const pages = (n: number) => (n > 0 ? Math.ceil(units.length / n) : Infinity);
|
||||
if (pages(altN) < pages(plainN)) { best = alt; [w, h] = [h, w]; rot = true; }
|
||||
}
|
||||
const perPage = best.cols * best.rows;
|
||||
if (!perPage) return [];
|
||||
|
||||
+67
-22
@@ -3,14 +3,41 @@
|
||||
// vorhersagbar und wiederholbar ist.
|
||||
import sharp from 'sharp';
|
||||
import { PDFDocument, StandardFonts, rgb, degrees } from 'pdf-lib';
|
||||
import { mmToPt, mmToPx } from './paper';
|
||||
import type { Line, Page, SheetSpec } from './printlayout';
|
||||
import { mmToPt, mmToPx } from './paper.ts';
|
||||
import type { Line, Page, SheetSpec } from './printlayout.ts';
|
||||
|
||||
/** Zuschnitt relativ zur Quelle (0..1) — auflösungsunabhängig speicherbar. */
|
||||
export interface CropRel { x: number; y: number; w: number; h: number }
|
||||
|
||||
export const FULL_CROP: CropRel = { x: 0, y: 0, w: 1, h: 1 };
|
||||
|
||||
/**
|
||||
* Was passiert, wenn das Bild nicht dem Zielverhältnis entspricht?
|
||||
* - `cover` — zuschneiden, bis das Format ausgefüllt ist (kein Rand, es fehlt etwas).
|
||||
* - `contain` — das ganze Bild einpassen, der Rest wird zur Randfarbe (nichts fehlt).
|
||||
* Verzerrt wird nie.
|
||||
*/
|
||||
export type FitMode = 'cover' | 'contain';
|
||||
|
||||
/** Größter mittiger Ausschnitt im Zielverhältnis — füllt aus, schneidet ab. */
|
||||
export function coverCrop(natW: number, natH: number, aspect: number): CropRel {
|
||||
const imgA = natW / natH;
|
||||
const w = imgA > aspect ? aspect / imgA : 1;
|
||||
const h = imgA > aspect ? 1 : imgA / aspect;
|
||||
return { x: (1 - w) / 2, y: (1 - h) / 2, w, h };
|
||||
}
|
||||
|
||||
/**
|
||||
* Kleinster Ausschnitt im Zielverhältnis, der das **ganze** Bild enthält.
|
||||
* Ragt bewusst über den Bildrand hinaus (w bzw. h > 1) — dort entsteht der Rand.
|
||||
*/
|
||||
export function containCrop(natW: number, natH: number, aspect: number): CropRel {
|
||||
const imgA = natW / natH;
|
||||
const w = imgA > aspect ? 1 : aspect / imgA;
|
||||
const h = imgA > aspect ? imgA / aspect : 1;
|
||||
return { x: (1 - w) / 2, y: (1 - h) / 2, w, h };
|
||||
}
|
||||
|
||||
/**
|
||||
* Bringt einen Bildausschnitt exakt auf ein physisches Maß.
|
||||
* `bleedMm` vergrößert das gerenderte Feld nach außen; die Trimmbox bleibt
|
||||
@@ -23,16 +50,20 @@ export async function renderCell(
|
||||
wMm: number,
|
||||
hMm: number,
|
||||
dpi: number,
|
||||
opt: { rotate?: boolean; ext?: 'jpg' | 'png'; bleedMm?: number; background?: string } = {},
|
||||
opt: { rotate?: boolean; ext?: 'jpg' | 'png'; bleedMm?: number; background?: string; fit?: FitMode } = {},
|
||||
): Promise<{ buffer: Buffer; width: number; height: number; ext: 'jpg' | 'png'; srcPx: [number, number] }> {
|
||||
const bleed = Math.max(0, opt.bleedMm || 0);
|
||||
const meta = await sharp(input, { failOn: 'none' }).metadata();
|
||||
const nw = meta.width || 0, nh = meta.height || 0;
|
||||
if (!nw || !nh) throw new Error('Bildmaße unbekannt.');
|
||||
|
||||
// Ohne Vorgabe: größtmöglicher mittiger Ausschnitt im Zielverhältnis
|
||||
// („cover") — nie verzerren, das ist bei Druckmaßen die häufigste Falle.
|
||||
const c = crop ? normCrop(crop) : coverCrop(nw, nh, wMm / hMm);
|
||||
// Ohne Vorgabe: passend zur gewählten Regel mittig ausrichten — nie verzerren,
|
||||
// das ist bei Druckmaßen die häufigste Falle.
|
||||
const fit: FitMode = opt.fit === 'contain' ? 'contain' : 'cover';
|
||||
const bg = opt.background || '#ffffff';
|
||||
const c = crop ? normCrop(crop, fit) : (fit === 'contain'
|
||||
? containCrop(nw, nh, wMm / hMm)
|
||||
: coverCrop(nw, nh, wMm / hMm));
|
||||
// Zuschnitt um die Beschnittzugabe erweitern (mittig), damit die Trimmbox
|
||||
// exakt das bleibt, was in der Vorschau gerahmt wurde.
|
||||
const fx = (wMm + 2 * bleed) / wMm;
|
||||
@@ -58,17 +89,28 @@ export async function renderCell(
|
||||
const targetW = mmToPx(wMm + 2 * bleed, dpi);
|
||||
const targetH = mmToPx(hMm + 2 * bleed, dpi);
|
||||
|
||||
let img = sharp(input, { failOn: 'none' }).extract({ left: ex.left, top: ex.top, width: exW, height: exH });
|
||||
// ACHTUNG: sharp führt `extend` intern NACH `resize` aus. Zuschnitt und
|
||||
// Auffüllen müssen deshalb in einem eigenen Durchgang passieren, sonst wird
|
||||
// das Ergebnis um die Randbreite zu groß (Rand-Modus, große Beschnittzugabe).
|
||||
let staged = sharp(input, { failOn: 'none' })
|
||||
.extract({ left: ex.left, top: ex.top, width: exW, height: exH });
|
||||
if (padLeft || padTop || padRight || padBottom) {
|
||||
img = img.extend({ left: padLeft, top: padTop, right: padRight, bottom: padBottom, extendWith: 'copy' });
|
||||
// Beim Einpassen wird der fehlende Bereich zur Randfarbe; beim Zuschneiden
|
||||
// (nur Beschnittzugabe) wird die Bildkante fortgeschrieben, damit kein
|
||||
// weißer Streifen am Schnitt entsteht.
|
||||
staged = staged.extend(fit === 'contain'
|
||||
? { left: padLeft, top: padTop, right: padRight, bottom: padBottom, background: bg }
|
||||
: { left: padLeft, top: padTop, right: padRight, bottom: padBottom, extendWith: 'copy' });
|
||||
}
|
||||
img = img.resize(targetW, targetH, { fit: 'fill' });
|
||||
const stagedBuf = await staged.png({ compressionLevel: 0 }).toBuffer();
|
||||
|
||||
let img = sharp(stagedBuf, { failOn: 'none' }).resize(targetW, targetH, { fit: 'fill' });
|
||||
if (opt.rotate) img = img.rotate(90);
|
||||
|
||||
const hasAlpha = !!meta.hasAlpha;
|
||||
const ext: 'jpg' | 'png' = opt.ext === 'png' || hasAlpha ? 'png' : 'jpg';
|
||||
const flat = hasAlpha && ext === 'jpg';
|
||||
if (flat) img = img.flatten({ background: opt.background || '#ffffff' });
|
||||
if (flat) img = img.flatten({ background: bg });
|
||||
|
||||
const out = await (ext === 'png'
|
||||
? img.withMetadata({ density: dpi }).png({ compressionLevel: 9 })
|
||||
@@ -78,19 +120,22 @@ export async function renderCell(
|
||||
return { buffer: out.data, width: out.info.width, height: out.info.height, ext, srcPx: [nw, nh] };
|
||||
}
|
||||
|
||||
/** Größter mittiger Ausschnitt mit dem Zielseitenverhältnis. */
|
||||
export function coverCrop(natW: number, natH: number, aspect: number): CropRel {
|
||||
const imgA = natW / natH;
|
||||
const w = imgA > aspect ? aspect / imgA : 1;
|
||||
const h = imgA > aspect ? 1 : imgA / aspect;
|
||||
return { x: (1 - w) / 2, y: (1 - h) / 2, w, h };
|
||||
}
|
||||
|
||||
function normCrop(c: CropRel | null): CropRel {
|
||||
function normCrop(c: CropRel | null, fit: FitMode = 'cover'): CropRel {
|
||||
if (!c) return FULL_CROP;
|
||||
const cl = (v: number, lo = 0, hi = 1) => Math.min(hi, Math.max(lo, Number.isFinite(v) ? v : 0));
|
||||
let w = cl(c.w, 0.001, 1), h = cl(c.h, 0.001, 1);
|
||||
let x = cl(c.x, 0, 1 - w), y = cl(c.y, 0, 1 - h);
|
||||
const num = (v: number, d = 0) => (Number.isFinite(v) ? v : d);
|
||||
// Beim Einpassen darf der Ausschnitt größer als das Bild sein (dort entsteht der Rand),
|
||||
// beim Zuschneiden muss er innerhalb des Bildes liegen.
|
||||
const maxSide = fit === 'contain' ? 40 : 1;
|
||||
const w = Math.min(maxSide, Math.max(0.001, num(c.w, 1)));
|
||||
const h = Math.min(maxSide, Math.max(0.001, num(c.h, 1)));
|
||||
if (fit === 'contain') {
|
||||
// Nur verhindern, dass das Bild komplett aus dem Ausschnitt herausgeschoben wird.
|
||||
const x = Math.min(1 - 0.05 * w, Math.max(-w + 0.05 * w, num(c.x)));
|
||||
const y = Math.min(1 - 0.05 * h, Math.max(-h + 0.05 * h, num(c.y)));
|
||||
return { x, y, w, h };
|
||||
}
|
||||
const x = Math.min(1 - w, Math.max(0, num(c.x)));
|
||||
const y = Math.min(1 - h, Math.max(0, num(c.y)));
|
||||
return { x, y, w, h };
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -35,7 +35,7 @@ const HELP_TEXT =
|
||||
'🔀 *Kombinieren:* 2+ Bilder schicken, ins Bild-Textfeld eine Beschreibung wie „mit unserer Hündin Frieda" — danach „🔀 Kombinieren" antippen.\n' +
|
||||
'✨ *Neues Bild:* unten „✨ Neues Bild" tippen und beschreiben, was entstehen soll.\n' +
|
||||
'♻️ *Weiterbearbeiten:* ein fertiges Bild von mir einfach wieder zurückschicken.\n' +
|
||||
'📐 *Druckbogen (ohne KI):* Bild schicken → „📐 Druckbogen" → Maß und Anzahl antippen. ' +
|
||||
'📐 *Passbilder (ohne KI):* Bild schicken → „📐 Passbilder" → Maß und Anzahl antippen. ' +
|
||||
'Du bekommst ein PDF in 100 %-Größe mit Schnittmarken.\n\n' +
|
||||
'Ich melde mich einmal, wenn alles fertig ist — mit Ergebnis und Link.';
|
||||
|
||||
@@ -135,7 +135,7 @@ export async function sweepDrafts(): Promise<void> {
|
||||
const n = (d.file_refs || []).length;
|
||||
// Ab 2 Bildern zusätzlich „Kombinieren" anbieten.
|
||||
if (n >= 2) { kb.row(); kb.text('🔀 Zu einem Bild kombinieren', 'c:x'); }
|
||||
kb.row(); kb.text('📐 Druckbogen (ohne KI)', 'p:menu');
|
||||
kb.row(); kb.text('📐 Passbilder / Druckbogen', 'p:menu');
|
||||
const compressed = (d.file_refs || []).some((f: any) => f.quality === 'compressed');
|
||||
const capNote = d.caption ? `\n📝 Beschreibung erkannt: „${d.caption}" — für „Kombinieren".` : '';
|
||||
try {
|
||||
|
||||
Reference in New Issue
Block a user