export_client.js

/**
 * Server-side export: sends the editor state to /api/export
 * which renders it with a headless browser for pixel-perfect output.
 */
async function exportImageServerSide() {
  const overlay = document.getElementById('loading-overlay');
  const overlayText = overlay ? overlay.querySelector('p') : null;
  if (overlay) {
    if (overlayText) overlayText.textContent = 'Exporting high-quality image...';
    overlay.classList.add('visible');
  }

  try {
    const container = document.getElementById('canvas-container');

    const state = {
      backgroundImage: originalImageData,
      foregroundImage: foregroundImageData,
      naturalWidth: naturalWidth,
      naturalHeight: naturalHeight,
      displayWidth: container.clientWidth,
      displayHeight: container.clientHeight,
      textElements: textElements.map(te => ({ ...te }))
    };

    const resp = await fetch('/api/export', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(state)
    });

    if (!resp.ok) {
      const err = await resp.text();
      throw new Error(`Export failed: ${err}`);
    }

    const blob = await resp.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'text-behind-image.png';
    a.click();
    URL.revokeObjectURL(url);
  } catch (err) {
    alert('Export error: ' + err.message);
    console.error(err);
  } finally {
    if (overlay) {
      overlay.classList.remove('visible');
      if (overlayText) overlayText.textContent = 'Removing background...';
    }
  }
}