data/bericht
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: weiße Seiten nach Reload — bgImage nicht mehr als blob-URL serialisieren [deploy]
All checks were successful
Deploy bericht / deploy (push) Successful in 1s
Details

Browse source 
Die fabric.Image der Quell-Bilder wurde mit toJSON([bgImage]) inkl. ihrer
blob:-URL gespeichert. Nach Reload ist die Blob-URL ungültig, fabric kann
das Bild nicht holen → weißer Canvas.

Fix: bgImage-Objekte beim Speichern aus dem JSON rausfiltern. Beim Laden
immer rerenderCurrent() aufrufen (frisches Quellbild aus page_image.php),
dann nur die Overlay-Shapes via enlivenObjects restoren.
This commit is contained in:
Eduard Wisch 2026-04-09 15:28:45 +02:00
parent 021ef1cbb2
commit 36aad9539a
1 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
js/editor.js
View file

@ -195,32 +195,34 @@
pctx.fillRect(0, 0, pdfCanvas.width, pdfCanvas.height);
resizeFabricToCanvas();
let jsonHasObjects = false;
let jsonHasBgImage = false;
// Quellbild IMMER frisch laden — gespeicherte bgImage-Objekte haben eine
// blob:-URL, die nach Reload ungültig ist.
await rerenderCurrent();
// Overlay-Shapes (Pfeile, Text, Rechtecke, …) aus JSON wiederherstellen,
// aber ohne bgImage/type=image-Einträge (Legacy-Cleanup).
if (loadedFabricJson) {
try {
const parsed = (typeof loadedFabricJson === 'string') ? JSON.parse(loadedFabricJson) : loadedFabricJson;
jsonHasObjects = parsed && Array.isArray(parsed.objects) && parsed.objects.length > 0;
jsonHasBgImage = jsonHasObjects && parsed.objects.some(o => o.bgImage === true || (o.type === 'image'));
if (jsonHasObjects) {
await new Promise((res) => {
fabricCanvas.loadFromJSON(parsed, () => {
fabricCanvas.renderAll();
res();
if (parsed && Array.isArray(parsed.objects) && parsed.objects.length > 0) {
const bg = fabricCanvas.getObjects().find(o => o.bgImage === true);
const overlays = parsed.objects.filter(o => !o.bgImage && o.type !== 'image');
if (overlays.length > 0) {
await new Promise((res) => {
fabric.util.enlivenObjects(overlays, (objs) => {
objs.forEach(o => fabricCanvas.add(o));
if (bg) bg.sendToBack();
fabricCanvas.requestRenderAll();
res();
});
});
});
applyTool();
applyTool();
}
}
} catch (e) {
console.warn('Fabric-JSON restore fehlgeschlagen:', e);
}
}
// Wenn kein Bild im JSON (alter Bericht vor Phase 6) ODER nie gespeichert:
// Quellbild frisch als Fabric-Image laden und hinter die existierenden Shapes legen
if (!jsonHasBgImage) {
await rerenderCurrent();
}
}
/**
@ -767,7 +769,14 @@
const fd = new FormData();
fd.append('token', cfg.token);
fd.append('pageid', currentPageId);
fd.append('fabric_json', JSON.stringify(fabricCanvas.toJSON(['bgImage'])));
// WICHTIG: bgImage-Objekte nicht serialisieren — ihre src ist eine
// blob:-URL, die nach Reload ungültig ist und zum weißen Canvas führt.
// Das Quellbild wird beim Laden frisch aus page_image.php geholt.
const jsonOut = fabricCanvas.toJSON(['bgImage']);
if (jsonOut && Array.isArray(jsonOut.objects)) {
jsonOut.objects = jsonOut.objects.filter(o => !o.bgImage);
}
fd.append('fabric_json', JSON.stringify(jsonOut));
fd.append('note', getNoteValue() || '');
fd.append('rotation', currentPageRotation);