隨機分配的數學美學：智慧分組神器的洗牌演算法與餘數定理

dom-to-image 瀑布流圖卡

相較於我們在 天賦探索器 中使用的 html2canvas，我們在此改用 dom-to-image 引擎。這徹底解決了複雜的 Masonry (瀑布流) 版面在轉存圖片時發生的文字「剃頭裁切」問題，確保主辦方能無損匯出網美級分組圖卡至 IG 或 LINE 群組，引爆病毒式擴散。

// 💥 終極大絕：呼叫 dom-to-image 擷取 SVG 轉 PNG
function downloadImage() {
  if (finalGroups.length === 0) {
    showToast("請先執行分組！", "warning");
    return;
  }

  const btn = document.getElementById('btnDownloadImg');
  const btnText = document.getElementById('btnDownloadImgText');
  const origText = btnText.innerText;
      
  btn.disabled = true;
  btnText.innerText = "處理中...";
  showToast("📸 正在使用原生向量引擎繪製圖卡...", "info");
      
  const canvasArea = document.getElementById('results-canvas');
  const watermark = document.getElementById('watermark');
      
  watermark.classList.remove('hidden');

  // 取得畫布實體尺寸，放大兩倍提升解析度
  const scale = 2;
  const style = {
    transform: `scale(${scale})`,
    transformOrigin: 'top left',
    width: canvasArea.offsetWidth + "px",
    height: canvasArea.offsetHeight + "px"
  };
      
  domtoimage.toPng(canvasArea, {
    height: canvasArea.offsetHeight * scale,
    width: canvasArea.offsetWidth * scale,
    style: style,
    bgcolor: '#ffffff'
  })
  .then(function (dataUrl) {
      watermark.classList.add('hidden');
      btn.disabled = false;
      btnText.innerText = origText;

      const link = document.createElement('a');
      link.download = `Gemify_分組結果_${new Date().getTime()}.png`;
      link.href = dataUrl;
      link.click();
      showToast("✅ 圖卡完美儲存成功！", "success");
  })
  .catch(function (error) {
      watermark.classList.add('hidden');
      btn.disabled = false;
      btnText.innerText = origText;
      console.error('DOM to Image 失敗:', error);
      showToast("圖卡繪製失敗，請重試", "error");
  });
}