feat: rename to Drucken, 86 image sizes, fix the distorted crop editor
The crop frame had width:100% together with max-height, so the height was clamped while the width stayed - the frame lost the target aspect ratio and object-fit:fill stretched the picture into it. Measured at 390px: frame 0.843 instead of 0.778, picture 8.3% too wide. The width now follows from the allowed height and the ratio, and the image carries its own aspect-ratio instead of a second percentage, so it cannot stretch at all. Dragging was fine but felt dead: at fill zoom the crop sits at the stop in one axis. The editor now states which way it can move, double-tap zooms, arrow keys nudge, and the zoom slider shows its factor. Sizes: 41 -> 86 in ten groups, including US inch sizes, instant-film picture areas, cards, DIN A0-A7 and eleven aspect ratios as physical sizes. The tab is called Drucken now; /druck and /passbilder redirect there.
This commit is contained in:
@@ -59,8 +59,8 @@ import Base from '../layouts/Base.astro';
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>5 · Passbilder & Druckbogen — exakte Maße und Schnittmarken (ohne KI)</h2>
|
||||
<p class="lead">Der Reiter <b>Passbilder</b> ist der Fotolabor-Teil von Klarbild: kein Modell, keine Kosten,
|
||||
<h2>5 · Drucken — exakte Maße und Schnittmarken (ohne KI)</h2>
|
||||
<p class="lead">Der Reiter <b>Drucken</b> ist der Fotolabor-Teil von Klarbild: kein Modell, keine Kosten,
|
||||
keine Wartezeit. Nur Zuschnitt, Skalierung und Geometrie — vom biometrischen Passbild bis zum
|
||||
30 × 40-Poster.</p>
|
||||
<ol>
|
||||
@@ -106,7 +106,7 @@ import Base from '../layouts/Base.astro';
|
||||
<li><b>Automatische Anordnung</b>: gleich große Bilder ergeben ein sauberes Raster; bei gemischten
|
||||
Größen werden die kleinen automatisch in die Restflächen neben den großen gesetzt.</li>
|
||||
</ul>
|
||||
<p class="mini">Auch per Telegram: Bild schicken → „📐 Passbilder" → Maß und Anzahl antippen → PDF zurück.
|
||||
<p class="mini">Auch per Telegram: Bild schicken → „🖨 Drucken" → Maß und Anzahl antippen → PDF zurück.
|
||||
Und am Handy funktioniert die Seite genauso wie am Rechner.</p>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
---
|
||||
// Alte Adresse — die Funktion heißt jetzt „Passbilder".
|
||||
return Astro.redirect('/passbilder', 301);
|
||||
// Alte Adresse — die Funktion heißt jetzt „Drucken".
|
||||
return Astro.redirect('/drucken', 301);
|
||||
---
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import PrintApp from '../components/PrintApp.tsx';
|
||||
---
|
||||
<Base title="Drucken · Klarbild">
|
||||
<h1 class="seiten-titel">Drucken</h1>
|
||||
<p class="seiten-lead">
|
||||
Ohne KI: Bilder auf exakte Maße bringen und mehrere davon in 100-%-Größe mit
|
||||
Schnittmarken auf einen Bogen setzen — vom biometrischen Passbild über den
|
||||
Kita-Satz bis zum 30 × 40-Poster.
|
||||
</p>
|
||||
<PrintApp client:load />
|
||||
<style>
|
||||
.seiten-titel{font-family:var(--font-display);font-size:1.6rem;margin:6px 0 4px;letter-spacing:-.02em;}
|
||||
.seiten-lead{color:var(--soft);font-size:13.5px;margin:0 0 16px;max-width:64ch;line-height:1.55;}
|
||||
@media(max-width:560px){.seiten-titel{font-size:1.35rem;}.seiten-lead{font-size:12.5px;}}
|
||||
</style>
|
||||
</Base>
|
||||
@@ -13,7 +13,7 @@ const BODY = `# Klarbild
|
||||
> saubere, druckfertige Bilder (bereinigen, freistellen, exakte Fotoformate,
|
||||
> The-Frame-Querformat, Sticker mit Kontur), liefert an Picdrop (SFTP/FTPS)
|
||||
> aus und sichert auf beliebige Backup-Ziele (z. B. NAS). Zusätzlich ein
|
||||
> KI-freie Passbildfunktion: Bilder exakt auf physische Maße bringen und mehrere
|
||||
> KI-freies Druckmodul (/drucken): Bilder exakt auf physische Maße bringen und mehrere
|
||||
> davon in 100-%-Größe mit Schnittmarken auf einen Druckbogen setzen (PDF).
|
||||
> Bedienung über Web, Telegram-Bot und HTTP-API/MCP.
|
||||
|
||||
@@ -59,7 +59,7 @@ Sprache der Oberfläche: Deutsch. Stack: Astro 5 (SSR) · Postgres · sharp · p
|
||||
- GET /api/items/:id/file — Ergebnisbild. Query: ?thumb=1 (Vorschau), ?preview=1 (kleines JPG fürs Vollbild),
|
||||
?download=1 (als Datei), ?src=1 (Quelle). Content-Type wird aus den Magic Bytes bestimmt (PNG/JPG/WEBP).
|
||||
|
||||
## Passbilder & Druckbogen (ohne KI, /passbilder)
|
||||
## Drucken — exakte Maße & Druckbogen (ohne KI, /drucken)
|
||||
Rein lokale Geometrie: Zuschnitt (sharp) + PDF (pdf-lib). Kein Modell, keine Kosten.
|
||||
- Maßangaben: \`12x15\` = 12×15 cm · \`35x45mm\` · \`5\` = 5×5 cm · \`4:3/15\` = Verhältnis 4:3, längere Kante 15 cm.
|
||||
- Papierformate (id): A6,A5,A4,A3,A3plus(329×483 mm),A2, F9x13,F10x15,F13x18,F15x20,F20x30, Letter, Legal — oder freies Maß.
|
||||
|
||||
@@ -1,18 +1,4 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
import PrintApp from '../components/PrintApp.tsx';
|
||||
// Alte Adresse — die Funktion heißt jetzt „Drucken".
|
||||
return Astro.redirect('/drucken', 301);
|
||||
---
|
||||
<Base title="Passbilder · Klarbild">
|
||||
<h1 class="seiten-titel">Passbilder & Druckbogen</h1>
|
||||
<p class="seiten-lead">
|
||||
Ohne KI: Bilder auf exakte Maße bringen und mehrere davon in 100-%-Größe mit
|
||||
Schnittmarken auf einen Bogen setzen — vom biometrischen Passbild über den
|
||||
Kita-Satz bis zum 30 × 40-Poster.
|
||||
</p>
|
||||
<PrintApp client:load />
|
||||
<style>
|
||||
.seiten-titel{font-family:var(--font-display);font-size:1.6rem;margin:6px 0 4px;letter-spacing:-.02em;}
|
||||
.seiten-lead{color:var(--soft);font-size:13.5px;margin:0 0 16px;max-width:64ch;line-height:1.55;}
|
||||
@media(max-width:560px){.seiten-titel{font-size:1.35rem;}.seiten-lead{font-size:12.5px;}}
|
||||
</style>
|
||||
</Base>
|
||||
|
||||
Reference in New Issue
Block a user