larpaso-website/scripts/ganzseiten-kacheln.mjs
Lara ad92f1f512 Load the zoom view in strips so it opens instantly
The full-page captures (up to 1.3 MB each) are now cut into strips by
scripts/ganzseiten-kacheln.mjs. The first strip is ~60 KB and is fetched
as soon as a device scrolls into view; further strips load just before
they are scrolled to. Strip sizes are in the file names, so the dialog
has its full height immediately without layout jumps.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-06 12:19:46 +02:00

43 lines
1.9 KiB
JavaScript

// Schneidet die Ganzseitenaufnahmen der Mappe in Streifen, damit die
// Großansicht sofort etwas zeigt und der Rest beim Scrollen nachlädt.
// Aufruf: node scripts/ganzseiten-kacheln.mjs <Ordner mit den PNGs>
// Erwartet <name>.png (Computer, 1440 px breit) und <name>-mobil.png (Handy, 780 px).
// Ergebnis: public/mappe/ganz/<name>[-mobil]/NNN-BREITExHOEHE.webp
// Die Maße stehen im Dateinamen, so braucht der Build kein Bildwerkzeug.
import sharp from 'sharp';
import { mkdirSync, readdirSync, rmSync } from 'node:fs';
import { join } from 'node:path';
import { fileURLToPath } from 'node:url';
const quelle = process.argv[2];
if (!quelle) throw new Error('Ordner mit den PNGs angeben');
const ziel = new URL('../public/mappe/ganz/', import.meta.url);
// Erster Streifen klein (schnell sichtbar), danach größere
const STREIFEN = { desktop: [900, 1800], mobil: [1700, 3200] };
for (const datei of readdirSync(quelle).filter((f) => f.endsWith('.png') && !f.startsWith('v-'))) {
const name = datei.replace(/\.png$/, '');
const art = name.endsWith('-mobil') ? 'mobil' : 'desktop';
const pfad = join(quelle, datei);
const { width, height } = await sharp(pfad, { limitInputPixels: false }).metadata();
const ordner = new URL(`${name}/`, ziel);
rmSync(ordner, { recursive: true, force: true });
mkdirSync(ordner, { recursive: true });
let top = 0;
let i = 0;
let summe = 0;
while (top < height) {
const h = Math.min(i === 0 ? STREIFEN[art][0] : STREIFEN[art][1], height - top);
const out = new URL(`${String(i).padStart(3, '0')}-${width}x${h}.webp`, ordner);
const info = await sharp(pfad, { limitInputPixels: false })
.extract({ left: 0, top, width, height: h })
.webp({ quality: 80 })
.toFile(fileURLToPath(out));
summe += info.size;
top += h;
i++;
}
console.log(`${name}: ${i} Streifen, ${Math.round(summe / 1024)} KB`);
}