Mondphasenbild jetzt ein png
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user