Mondphasenbild jetzt ein png

This commit is contained in:
2026-04-03 19:21:01 +02:00
parent 341fded25b
commit 81941d803d
+7 -6
View File
@@ -1165,7 +1165,7 @@ $starDataErrorJson = json_encode($starDataError, JSON_UNESCAPED_UNICODE | JSON_U
<div class="monatskarte-stage monatsphase-stage">
<div class="monatsphase-strip-wrap">
<canvas id="monatsphasenCanvas" width="1200" height="220" aria-label="Mondphasen des Monats in einer Zeile"></canvas>
<img id="monatsphasenImage" alt="Mondphasen des Monats in einer Zeile">
</div>
</div>
@@ -1329,7 +1329,7 @@ $starDataErrorJson = json_encode($starDataError, JSON_UNESCAPED_UNICODE | JSON_U
padding-bottom: 4px;
}
#monatsphasenCanvas {
#monatsphasenImage {
display: block;
width: min(100%, 1200px);
min-width: 920px;
@@ -1370,13 +1370,14 @@ const MONTH_PHASE_EVENTS = <?= $moonPhaseEventsJson ?: '[]' ?>;
const MONTH_CHART_ERROR = <?= $starDataErrorJson ?: 'null' ?>;
(function () {
const canvas = document.getElementById('monatsphasenCanvas');
const imageEl = document.getElementById('monatsphasenImage');
const statusEl = document.getElementById('monatsphasenStatus');
if (!canvas || !statusEl || !window.Astronomy || !MONTH_CHART_CONFIG) {
if (!imageEl || !statusEl || !window.Astronomy || !MONTH_CHART_CONFIG) {
return;
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const phaseImage = new Image();
phaseImage.src = <?= json_encode($publicBasePath . 'images/moons/moon4geocron.png', JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>;
@@ -1404,13 +1405,12 @@ const MONTH_CHART_ERROR = <?= $starDataErrorJson ?: 'null' ?>;
}
function resizeCanvas() {
const cssWidth = Math.max(920, Math.floor(canvas.clientWidth || 1200));
const cssWidth = Math.max(920, Math.floor(imageEl.clientWidth || 1200));
const cssHeight = 220;
const dpr = Math.max(1, window.devicePixelRatio || 1);
canvas.width = Math.floor(cssWidth * dpr);
canvas.height = Math.floor(cssHeight * dpr);
canvas.style.height = cssHeight + 'px';
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
draw();
}
@@ -1543,6 +1543,7 @@ const MONTH_CHART_ERROR = <?= $starDataErrorJson ?: 'null' ?>;
ctx.fillStyle = 'rgba(225, 232, 246, 0.94)';
}
imageEl.src = canvas.toDataURL('image/png');
statusEl.textContent = 'Mondphasenleiste fuer ' + monthName + ' ' + year;
}