Export in Monatsvorscheu final

public/monatsvorhersage.php

@@ -2545,6 +2545,15 @@ $observationTipCalendarFilenameJson = json_encode(sprintf('astrotools-monatserei
 
     <section class="monatskarte-card">
       <div class="monatskarte-header">
+        <div>
+          <h3>Mondphasen</h3>
+          <p><?= htmlspecialchars($months[$selectedMonth] . ' ' . (string) $selectedYear, ENT_QUOTES, 'UTF-8') ?></p>
+        </div>
+        <div class="monatskarte-export">
+          <button type="button" class="monatskarte-export-button" id="downloadMonatsphasenPng">
+            PNG herunterladen
+          </button>
+        </div>
       </div>
 
       <div class="monatskarte-stage monatsphase-stage">
@@ -3066,7 +3075,7 @@ function monthChartExportCaption() {
     return '';
   }
 
-  return 'Sternhimmel fuer ' + String(hour).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ' Uhr';
+  return 'Sternhimmel für ' + String(hour).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ' Uhr';
 }
 
 function formatGermanDate(date) {
@@ -3285,6 +3294,7 @@ function monthChartCometRaDec(comet, date) {
 })();
 
 (function () {
+  const downloadButton = document.getElementById('downloadMonatsphasenPng');
   const imageEl = document.getElementById('monatsphasenImage');
   const statusEl = document.getElementById('monatsphasenStatus');
 
@@ -3295,6 +3305,9 @@ function monthChartCometRaDec(comet, date) {
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   const phaseImage = new Image();
+  let phaseViewportWidth = 1200;
+  let phaseViewportHeight = 220;
+  let phaseRenderDpr = Math.max(1, window.devicePixelRatio || 1);
   phaseImage.src = <?= json_encode($publicBasePath . 'images/moons/moon4geocron.png', JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>;
 
   function clamp01(value) {
@@ -3319,15 +3332,25 @@ function monthChartCometRaDec(comet, date) {
     };
   }
 
-  function resizeCanvas() {
-    const cssWidth = Math.max(920, Math.floor(imageEl.clientWidth || 1200));
-    const cssHeight = 220;
-    const dpr = Math.max(1, window.devicePixelRatio || 1);
-
+  function renderPhaseCanvas(cssWidth, cssHeight, dpr, shouldUpdateImage) {
+    phaseViewportWidth = cssWidth;
+    phaseViewportHeight = cssHeight;
+    phaseRenderDpr = dpr;
     canvas.width = Math.floor(cssWidth * dpr);
     canvas.height = Math.floor(cssHeight * dpr);
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     draw();
+
+    if (shouldUpdateImage) {
+      imageEl.src = canvas.toDataURL('image/png');
+    }
+  }
+
+  function resizeCanvas() {
+    const cssWidth = Math.max(920, Math.floor(imageEl.clientWidth || 1200));
+    const cssHeight = 220;
+    const dpr = Math.max(1, window.devicePixelRatio || 1);
+    renderPhaseCanvas(cssWidth, cssHeight, dpr, true);
   }
 
   function drawMoonDisc(x, y, radius, phaseInfo) {
@@ -3387,7 +3410,7 @@ function monthChartCometRaDec(comet, date) {
     ctx.restore();
 
     ctx.strokeStyle = 'rgba(255, 255, 255, 0.16)';
-    ctx.lineWidth = scalePx(1);
+    ctx.lineWidth = 1;
     ctx.beginPath();
     ctx.arc(x, y, radius, 0, Math.PI * 2);
     ctx.stroke();
@@ -3398,8 +3421,8 @@ function monthChartCometRaDec(comet, date) {
       return;
     }
 
-    const width = canvas.width / Math.max(1, window.devicePixelRatio || 1);
-    const height = canvas.height / Math.max(1, window.devicePixelRatio || 1);
+    const width = phaseViewportWidth;
+    const height = phaseViewportHeight;
     const year = Number(MONTH_CHART_CONFIG.year);
     const month = Number(MONTH_CHART_CONFIG.month);
     const monthName = String(MONTH_CHART_CONFIG.monthName || '');
@@ -3458,10 +3481,44 @@ function monthChartCometRaDec(comet, date) {
       ctx.fillStyle = 'rgba(225, 232, 246, 0.94)';
     }
 
-    imageEl.src = canvas.toDataURL('image/png');
     statusEl.textContent = 'Mondphasenleiste für ' + monthName + ' ' + year;
   }
 
+  function monthPhaseExportFilename() {
+    if (!MONTH_CHART_CONFIG) {
+      return 'Himmelsanblick_mondphasen.png';
+    }
+
+    const year = String(MONTH_CHART_CONFIG.year || '');
+    const month = String(MONTH_CHART_CONFIG.monthNumber || MONTH_CHART_CONFIG.month || '').padStart(2, '0');
+    return 'Himmelsanblick_mondphasen_' + year + '_' + month + '.png';
+  }
+
+  if (downloadButton) {
+    downloadButton.addEventListener('click', function () {
+      const previous = {
+        width: phaseViewportWidth,
+        height: phaseViewportHeight,
+        dpr: phaseRenderDpr,
+      };
+
+      try {
+        statusEl.textContent = 'Mondphasen-PNG wird in 2000 px neu gerendert...';
+        downloadButton.disabled = true;
+
+        const exportWidth = MONTH_CHART_EXPORT_WIDTH;
+        const exportHeight = Math.round(exportWidth * (220 / 1200));
+        renderPhaseCanvas(exportWidth, exportHeight, 1, false);
+        composeExportCanvas(canvas, 'bottom-left').then(function (exportCanvas) {
+          triggerCanvasDownload(exportCanvas || canvas, monthPhaseExportFilename());
+        });
+      } finally {
+        renderPhaseCanvas(previous.width, previous.height, previous.dpr, true);
+        downloadButton.disabled = false;
+      }
+    });
+  }
+
   phaseImage.onload = resizeCanvas;
   phaseImage.onerror = function () {
     statusEl.textContent = 'Mondgrafik konnte nicht geladen werden.';