Fix hero image persistence: separate image and meta storage

Image base64 stored in hero-image section (raw), position/height
in hero-meta section (small JSON). Fixes save failure caused by
oversized JSON payload when wrapping base64 inside JSON.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Etienne Delvarre
2026-05-29 10:58:35 +02:00
parent 5f60ba2829
commit 07f2952b89
+12 -24
View File
@@ -1103,25 +1103,7 @@ function setHeroHeight(val) {
} }
function saveHeroMeta() { function saveHeroMeta() {
const imageData = visionData['hero-image']?.Contenu || ''; saveVisionSection('hero-meta', JSON.stringify({ posY: heroMeta.posY, height: heroMeta.height }));
if (!imageData) return;
const payload = JSON.stringify({ image: imageData, posY: heroMeta.posY, height: heroMeta.height });
saveVisionSection('hero-image', payload);
}
function loadHeroImageData(raw) {
if (!raw) return;
// Try JSON format (new) or plain base64 (legacy)
try {
const parsed = JSON.parse(raw);
heroMeta.posY = parsed.posY ?? 50;
heroMeta.height = parsed.height ?? 280;
applyHeroImage(parsed.image || '');
} catch {
// Legacy: raw is the base64 image directly
applyHeroImage(raw);
}
applyHeroMeta();
} }
// Drag to reposition // Drag to reposition
@@ -1170,10 +1152,10 @@ function uploadHeroImage(input) {
canvas.getContext('2d').drawImage(img, 0, 0, w, h); canvas.getContext('2d').drawImage(img, 0, 0, w, h);
const dataUrl = canvas.toDataURL('image/jpeg', 0.85); const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
applyHeroImage(dataUrl); applyHeroImage(dataUrl);
heroMeta.posY = 50; // Reset position on new image heroMeta.posY = 50;
applyHeroMeta(); applyHeroMeta();
const payload = JSON.stringify({ image: dataUrl, posY: heroMeta.posY, height: heroMeta.height }); saveVisionSection('hero-image', dataUrl);
saveVisionSection('hero-image', payload); saveHeroMeta();
}; };
img.src = e.target.result; img.src = e.target.result;
}; };
@@ -1202,8 +1184,14 @@ async function loadVision() {
setupEditable(elId, section); setupEditable(elId, section);
} }
// Hero image (JSON with position/height or legacy base64) // Hero image (base64 brut) + meta (position/hauteur séparées)
loadHeroImageData(visionData['hero-image']?.Contenu || ''); applyHeroImage(visionData['hero-image']?.Contenu || '');
try {
const meta = JSON.parse(visionData['hero-meta']?.Contenu || '{}');
heroMeta.posY = meta.posY ?? 50;
heroMeta.height = meta.height ?? 280;
} catch { /* defaults */ }
applyHeroMeta();
// Render structured sections // Render structured sections
renderTags(); renderTags();