Rendering robuster + sichtbare Fehlermeldung + no-cache

- crossOrigin von Asset-Images entfernt (haeufige Ursache fuer "tainted canvas",
  wodurch der Szenen-Export fehlschlug -> kaputtes Bild)
- toBlob mit Fallback auf toDataURL
- Ladefehler werden jetzt sichtbar im UI angezeigt (statt nur Konsole)
- Frontend mit Cache-Control: no-cache -> kein veraltetes JS/CSS nach git pull

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Guido
2026-08-04 18:58:51 +02:00
parent b95464670a
commit adc0fae93f
4 changed files with 62 additions and 8 deletions

View File

@@ -17,7 +17,8 @@ let emojiAssetsAvailable = null; // pro Session: liegt ein Emoji-Bildset vor?
function loadImage(url) {
return new Promise((resolve) => {
const img = new Image();
img.crossOrigin = 'anonymous';
// Kein crossOrigin: Assets sind same-origin. crossOrigin kann je nach Browser/Proxy
// dazu fuehren, dass das Canvas als "tainted" gilt und der Export fehlschlaegt.
img.onload = () => resolve({ url, img });
img.onerror = () => resolve({ url, img: null });
img.src = url;
@@ -155,9 +156,20 @@ export class Scene {
ctx.restore();
}
return await new Promise((resolve) => {
canvas.toBlob((blob) => resolve(URL.createObjectURL(blob)), 'image/png');
});
// Export als Blob-URL; mit Fallback auf dataURL, falls toBlob nicht greift.
try {
const blob = await new Promise((resolve, reject) => {
try {
canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('toBlob lieferte null'))), 'image/png');
} catch (err) {
reject(err);
}
});
return URL.createObjectURL(blob);
} catch (err) {
console.warn('[scene] toBlob fehlgeschlagen, versuche toDataURL:', err);
return canvas.toDataURL('image/png'); // wirft nur, wenn Canvas wirklich "tainted" ist
}
}
_drawItem(ctx, item) {